1. 前言
很多场景都是动态路由,那今天来梳理下动态路由
2. 动态路由-场景-杂谈
应用场景 紧接上篇文章vue路由守卫
上篇文章我相信有部分道友 就有个疑问,路由守卫 也可以是权限控
制,
比方说根据用户的级别,显示的菜单是不一样的,也就是所谓的权限控制
记得早期有个项目,需要权限控制到按钮级别,同一个界面,不同用户登录,显示界面有些按钮有,有些没有
3. addRoutes语法
参数是个数组,
routes参数名应该已经猜到了吧 ,就是你的路由配置表,在这动态添加这就是编程的方式,在运行时,动态的添加路由的原理
router.addRoutes(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()代替。
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路径/ 必须写,而且必须带上一级路径的path2.
addRoute参数1,是父路由的path或者是父路由的name
7.路由缓存
界面在来回点击 链接,通过路由跳转的情况下,每次都会发送请求
如果确定 这些界面的数据短期内不会变的情况下,可以进行缓存
keep-alive
<keep-alive> <router-view /> </keep-alive>
用
keep-alive包裹我们的路由,这样以后再进这个界面,请求就不会在发送了
8. 缓存配置
注意和组件 name属性值保持一致
1.png
8.1. include 指定缓存路由
字符串或正则表达式。只有名称匹配的组件会被缓存
- 单个缓存
<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 缓存的组件停用时调用") }
