Vue-路由

前提了解：

单页应用：所有功能在一个页面上实现

多页应用：与单页应用相对应的，不同的功能通过不同的页面来实现

单页面-多页面对比：

正式学习

1、什么是路由？

是什么：就是一一对应关系的集合

前端路由（单页应用程序）： 一个url地址，对应哪个组件 后端路由：一个接口地址，对应哪一段接口地址

2、工作原理

前端路由工作原理：前端路由的本质, 对url的hash值进行改变和监听，切换对应页面组件的dom结构

根据地址栏变化（不重新向服务器发请求），去局部更新不同的页面内容，完成前端业务场景切换

思路：①URL 地址栏中的 Hash 值发生了变化 ②前端js监听了到 Hash 地址的变化 window.οnhashchange=()=>{} ③前端js把当前 Hash 地址对应的组件渲染都浏览器中

3、官方路由基本使用

说明⚠️：如果使用vue-cli创建项目，没有选择路由插件，需要单独安装和配置

vue-router文档

3.1 安装和使用

1、安装 npm i vue-router@3.5.3 （vue2匹配的是3.5.3版本，如果不加版本的加就是最新版，与vue2会出现不兼容的情况）

2、创建路由文件

router/index.js (router为文件夹，index.js为vue路由的，默认配置文件)

// 导入路由插件
import VueRouter from 'vue-router'
import Vue from 'vue'

// 使用插件 - 重要
Vue.use(VueRouter)

// 导入组件

import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'


// 创建路由规则
const router = new VueRouter({
  routes: [
    {
      path: "/page1", // 当浏览器访问 http://localhost:8080/#/page1时，
      component: Page1  // 装入组件 Page1
    },
    {
      path: "/page2",
      component: Page2
    },
    {
      path: "/page3",
      component: Page3
    }
  ]
})

export default router

3、使用路由 在main.js中

import router from './router/index.js'

new Vue({
  router: router,                       // 使用路由 
  render: h => h(App),
}).$mount('#app')

<template>
  <div>
     <nav>
      	  <router-link  to="/fuzhu">辅助英雄</router-link>&ensp;                 
       	   <router-link  to="/fashi">法师英雄</router-link>&ensp;
        	<router-link  to="/sheshou">射手英雄</router-link>&ensp;
     </nav>
     <div class="box">
        	<router-view></router-view>
     </div>
  </div>
</template>

 3.2 router-link

作用： 用于提供路由链接，实现页面跳转 （相当于a链接）

要点： ●是vue-router提供的组件

            ●router-link最终会渲染成a链接

            ●router-link自带链接导航高亮的功能

激活类名:

        router-link-exact-active                 router-link-active

小结:

链接导航, 用router-link配合to, 实现点击切换路由

●router-link组件会被vue解析成a标签，但不能直接通过a标签来跳转。

●如果当前路由被激活会添加特殊的类名：

3.3 router-link跳转时带参数 

带参数跳转有两种方式:

第一种是：query传参，适用场景：页面搜索,

第二种是：params传参，适用场景：详情页

query传参

 <!-- 1、query传参 -->
传的格式：
     <router-link to="/movie?name=张三&age=24"> 电影 </router-link>


收的格式：
     {{$route.params}}

params传参

格式：传的格式：

 

  {
      name:'dianshiju',
      path:'/dianshiju/:name/:time',
      component:dianshiju,
    }

 

 

3.4 路由-重定向

重定向， 用户访问的是A地址，系统把它切换到B地址。

应用场景：改变默认访问页面的行为

在router/index.js - 修改配置

因为vue官方定义了，用户在浏览器打开首页时，默认路径给了一个/

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  }

3.5 路由404

统一处理异常地址：那些个正常配置的地址之外的地址。

修改路由规则即可：

通过通配符*，设置404页面

import NotFound from "@/components/NotFound";

const routes = [
  {
    path: "/",
    redirect: "/home" // 重定向
  },
  
  // ...正常路由
  
  { // 当上面路由都不匹配, 匹配这个通配符, 显示NotFound页面
    path: "*",
    component: NotFound
  }
]

 3.6 编程式导航

编程式： 写代码

导航：页面跳转

作用：用代码实现跳转页面

// 跳转页面不传参
this.$router.push('/路由路径')
this.$router.push({path: '路由路径'})
this.$router.push({name: '路由名称'})

// 跳转并query传参-方式1
this.$router.push("/路由路径?参数1=值1&参数2=值2")
// 跳转并query传参-方式2
this.$router.push({
    path: "路由路径",
    query: {
        "参数1":值1,
        "参数2":值2
    }
})

// 跳转并params传参-方式1
this.$router.push("/路由路径/值1/值2")
// 跳转并params传参-方式2
this.$router.push({
    name: "路由名称",
    params: {
        "参数1":值1,
        "参数2":值2
    }
})


// 后退
$router.back()

4、路由嵌套

在已有的路由容器中，再实现一套路由，再套一个路由容器，叫：嵌套路由。

原理：router-view中再次包含router-view。 背景：一个组件内部包含的业务还是很复杂，需要再次进行拆分。

格式：在路由里面加一个children，格式为数组，数组里包着对象

routes:[
  {
    path: '/page1', 
    component: Page1, // 这个组件内部还有router-view
    children: [
      {
        path:'',  // path为空，表示当 #/page1时，显示 Page1组件+组件1
        component: 组件1  // 
      },
      {
        path:'/xx1', // path以/开头，表示当 #/xx1时，显示 Page1组件+组件2
        component: 组件2
      },
      {
        path:'xx2', // path以/开头，表示当 /page1/xx2时，显示 Page1组件+组件3
        component: 组件3
      }
    ]
  }
]