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路径/ 必须写,而且必须带上一级路径的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>

---

2. 多个缓存写法
   **,**隔开

 <keep-alive include="shop,my">
       <router-view />
    </keep-alive>

---

3. 变量动态写法
   **:** 绑定 值是个数组

 <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 缓存的组件停用时调用")
        }

---

参考资料

vue路由-3守卫
路由守卫
keep-alive

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉