vue-addRoute-keepAlive

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

1. 前言


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


2. 动态路由-场景-杂谈


应用场景 紧接上篇文章vue路由守卫

上篇文章我相信有部分道友 就有个疑问,路由守卫 也可以是权限控

制,

比方说根据用户的级别,显示的菜单是不一样的,也就是所谓的权限控制

记得早期有个项目,需要权限控制到按钮级别,同一个界面,不同用户登录,显示界面有些按钮有,有些没有


3. addRoutes语法


参数是个数组,

routes参数名应该已经猜到了吧 ,就是你的路由配置表,在这动态添加

这就是编程的方式,在运行时,动态的添加路由的原理


router.addRoutes(routes)

记得上篇文章的例子address界面判断用户是否登录

还拿这个做例子


4. 需求


只有管理员才显示address这个界面

也就是登录的时候肯定根据用户信息判断是否配置这个路由

而不是不管啥用户级别,都一股脑的配置在路由表

逻辑分析

S5[~Z9X60$GH56PI7JD80VT.png

动态路由配置.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 二级路由

D_A[X`CT@LOI4`3601DL%9D.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属性值保持一致

MC19WEDSMERRUZ$15CLZL5P.png


8.1. include 指定缓存路由

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

  1. 单个缓存


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


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


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


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


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




相关文章
|
5月前
|
JavaScript 前端开发 应用服务中间件
|
缓存 前端开发 JavaScript
React中怎么实现状态自动保存(KeepAlive)?
React中怎么实现状态自动保存(KeepAlive)?
290 0
|
JavaScript
【Error】Vue.js is detected on this page. Open DevTools and look for the Vue panel.
【Error】Vue.js is detected on this page. Open DevTools and look for the Vue panel.
|
JavaScript
vue-cli3.0无config,js跨域解决
vue-cli3.0无config,js跨域解决
55 2
|
存储 JavaScript 调度
Vue3 KeepAlive组件原理
Vue3 KeepAlive组件原理
|
Web App开发 JavaScript 前端开发
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-2
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
81 0
|
存储 JavaScript 前端开发
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)-1
前端常见知识点汇总(ES6,Vue,axios,Node.js,npm,webpack)
84 0
|
缓存 JavaScript
vue组件keepAlive的使用
vue组件keepAlive的使用
59 0
|
缓存 JavaScript API
【Vue3第二十二章】KeepAlive缓存组件
【Vue3第二十二章】KeepAlive缓存组件
649 0
|
存储 缓存 前端开发
一看就会的Next.js Pages Router版 -- Getting Started(二)
一看就会的Next.js Pages Router版 -- Getting Started
203 0