资料
官网: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
总结: