资料
官网：https://v3.router.vuejs.org/zh/guide/
尚硅谷视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=118
基本使用
安装：
这里安装vue3.x
- vue 2.x 版本对应 vue-router 3.x
- vue 3.x 版本对应 vue-router 4.x
- 其他以此类推
npm i vue-router@3
配置文件
定义连个组件：Foo、Bar，用作路由组件
在src目录下新建router/index.js文件，大致内容：
// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
// 1. 定义 (路由) 组件。
import Foo from "../components/Foo"
import Bar from "../components/Bar"
// 2. 定义路由
const routes = [
{
path: '/foo', component: Foo },
{
path: '/bar', component: Bar }
]
// 3. 创建 router 实例，然后传 `routes` 配置
export default new VueRouter({
routes // (缩写) 相当于 routes: routes
})
后面，将把路由有关的组件放到/pages路径下
修改main.js
main.js加入以下内容：
使用路由
总结
多级路由
例子
定义两个组件：Bar01、Bar02
作为Bar的子路由：（不要带"/"）
使用：
- router-link定义导航（写完整路径）
- router-view定义显示在哪
总结：
路由参数
query参数
注意：使用$route.query.xx(一定要注意使用的是$route而不是$router)进行接收，即使使用的是字符串写法，也要用query接收！
params参数
props配置
命名路由(name)
前提：必须使用to的对象写法，如果使用字符串写法会被当成路径（path）处理
router-link的属性
replace
编程式路由导航
例如，想通过以下四个按钮实现跳转：
通过点击事件完成push、replace跳转：
总结：
缓存路由组件：
使用keep-alive标签包裹router-view标签，使用include指定哪些组件要缓存，如果不指定，所有在该router-view显示的组件都将会被缓存。include的值是组件名，也就是这个值：
总结：
如果要缓存多个，可使用:include="['name1','name2']"来实现
两个新的生命周期函数
路由守卫
全局守卫
定义路由的时候，使用如下方式标识访问该组件需要权限：
- meta是路由的元信息，允许我们存一些东西在里面；
- isAuth便是我们存的一个变量，当然也可以用其他变量名
创建路由实例后，通过以下方式配置全局前置、后置守卫：
- to：跳往哪里
- from：从哪来
- next：调用next()表示放行
关键代码：
1、配置meta:
meta: {
isAuth: true
}
2、配置全局守卫
//配置全局守卫
router.beforeEach((to, from, next) => {
if (to.meta.isAuth) {
//权限控制逻辑...
if (confirm("是否授权")) {
next();
} else {
return;
}
}
//放行
next();
})
router.afterEach((to, from) => {
console.log("跳转成功...", to);
})
独享守卫
在定义路由的时候，通过beforeEnter来为某个路由设置独享守卫：它的参数和全局守卫的beforeEach参数完全相同。
关键代码：
beforeEnter: (to, from, next) => {
//权限控制逻辑...
if (confirm("是否授权foo02")) {
next();
}
}
组件内守卫
在组件内使用如下两个方法可以定义组件内守卫
- beforeRouteEnter：进入守卫:通过路由规则，进入该组件时被调用
- beforeRouteLeave：离开守卫:通过路由规则，离开该组件时被调用
关键代码：
beforeRouteEnter(to,from,next){
alert("将要通过路由规则进入Bar")
next()
},
beforeRouteLeave (to, from, next) {
alert("将要通过路由规则离开Bar")
next()
}
总结
路由的mode
目前，可选值有三个：
官网解释：https://v3.router.vuejs.org/zh/api/#mode
总结：
