1. 前言
- 很多场景都是动态路由,那今天来梳理下动态路由
2. 动态路由-场景-杂谈
- 应用场景 紧接上篇文章vue路由守卫
- 上篇文章我相信有部分道友 就有个疑问,路由守卫 也可以是权限控制,
- 比方说根据用户的级别,显示的菜单是不一样的,也就是所谓的权限控制
- 记得早期有个项目,需要权限控制到按钮级别,同一个界面,不同用户登录,显示界面有些按钮有,有些没有,其他都一样
3. addRoutes语法
- 参数是个数组,
routes参数名应该已经猜到了吧 ,就是你的路由配置表,在这动态添加- 这就是编程的方式,在运行时,动态的添加路由的原理
//vue-router 3x写法
router.addRoutes(routes)
//vue-router 4x写法
router.addRoute(routes)
- 记得上篇文章的例子
address界面判断用户是否登录- 还拿这个做例子
4. 需求
- 只有管理员才显示
address这个界面- 也就是登录的时候肯定根据用户信息判断是否配置这个路由
- 而不是不管啥用户级别,都一股脑的配置在
路由表里
逻辑分析
动态路由配置.png
5. 路由逻辑代码实现
// ******************** 动态路由
// 全局守卫
router.beforeEach((to,from,next)=>{
// 判断路由是否需要守卫
//meta数据的方式
if(window.isLogin){
// 已登录
if(to.path ==="/login"){
next("/")
}else{
next()
}
}else{
// 未登录
if(to.path ==="/login"){
next()
}else{
next("/login?redirect="+to.fullPath)
// 传参的方式比较多
//next({name:"Login",params:{toRouterName:to.name}})
}
}
})
6. 登录逻辑实现
整体思路就是 在 跳转之前把路由添加上去
6.1 addRoutes
logOut() {
window.isLogin = false;
console.log(this.$route);
this.$router.push("/");
},
loginBtn() {
window.isLogin = true;
console.log("添加前:", this.$route);
// 动态添加
this.$router.addRoutes([
{
path: "/address",
name: "Address",
component: () => import("../views/address.vue")
},
]);
console.log("添加后:", this.$route);
// 不同的传参方式,对应不同的接收方式
//this.$router.push({name:this.$route.params.toRouterName})
this.$router.push(this.$route.query.redirect);
}
6.2 addRoute
router.addRoutes
已废弃：使用router.addRoute()代替。setTimeout只是为了模拟异步请求的情况
setTimeout(() => {
this.$router.addRoute({ path: '/add', component: AddView })
// 第一个参数是想要给哪个路由添加子路由
// 就写哪个路由的别名/name
this.$router.addRoute('News',{ path: '/plus', name:'Plus', component: AddView })
this.isAdd = true
}, 1000)
- 嵌套路由动态添加等价下面代码
router.addRoute({
name: 'News',
path: '/news',
component: News,
children: [{ path: 'plus', component: AddView }],
})
6.3 一个参数
- 添加一条新路由规则。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它。
6.3.1语法
addRoute(route: RouteConfig): () => void
6.3.2实际代码
// 实际开发情况 可以根据用户的级别 ,添加不同的 路由界面
const serve = {
path: "/serve",
name: "servePage",
component: () => import("@/views/serve.vue")
}
this.$router.addRoute(serve);
//测试
this.$router.push("serve")
1.
path路径/ 必须写
2.注意这个因为是动态添加的不能通过在浏览器地址的直接输入path路径的形式跳转
6.4 2个参数
- 添加一条新的路由规则记录作为现有路由的子路由。如果该路由规则有 name，并且已经存在一个与之相同的名字，则会覆盖它
- 其实就是添加子路由
6.4.1 语法
addRoute(parentName: string, route: RouteConfig): () => void
6.4.2 二级路由
1.png
6.4.3 改造
const serve = {
path: "/one/wait",
name: "wait",
component: () => import("@/views/page/wait.vue")
}
this.$router.addRoute("/one/wait",serve);
this.$router.push("/one/wait") //测试
1.
path路径/ 必须写,而且必须带上一级路径的path
2.addRoute参数1,是父路由的path或者是父路由的name
7.路由缓存
- 界面在来回点击 链接,通过路由跳转的情况下,每次都会发送请求
- 如果确定 这些界面的数据短期内不会变的情况下,可以进行缓存
keep-alive
<keep-alive>
<router-view />
</keep-alive>
用
keep-alive包裹我们的路由,这样以后再进这个界面,请求就不会在发送了
8. 缓存配置
注意和组件 name属性值保持一致
1.png
8.1. include 指定缓存路由
1.字符串或正则表达式。只有名称匹配的组件会被缓存
- 单个缓存
<keep-alive include="shop">
<router-view />
</keep-alive>
- 多个缓存写法
**,**隔开
<keep-alive include="shop,my">
<router-view />
</keep-alive>
- 变量动态写法
**:**绑定 值是个数组
<keep-alive :include="[]">
<router-view />
</keep-alive>
8.4 exclude
字符串或正则表达式。任何名称匹配的组件都不会被缓存。
8.5 max - 数字,最多可以缓存多少组件实例。
9.钩子
activated(){
console.log("active-被 keep-alive 缓存的组件激活时调用。")
},
deactivated(){
console.log("deactivated被 keep-alive 缓存的组件停用时调用")
}
- 当组件在 <keep-alive> 内被切换时，它的
mounted和unmounted生命周期钩子不会被调用，- 取而代之的是
activated和deactivated。(这会运用在 <keep-alive> 的直接子节点及其所有子孙节点。)
10. 后记
- 删除动态路由
- 获取动态路由等等可以看官网删除路由
