vue路由-4-动态添加-addRoute-keepAlive

2022-05-15 544

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 很多场景都是动态路由,那今天来梳理下动态路由

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 指定缓存路由

字符串或正则表达式。只有名称匹配的组件会被缓存

单个缓存

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