vue 利用keep-alive进行缓冲 注意事项

技术文章 7个月前 完美者
1,393 0

标签:全局   实例   默认   from   状态   code   --   route   类别   

1、对于一层跳转,例如 A(列表页面) ->进入 B(详情页面) ->再到 A(列表页面),建议用一下方式:

<keep-alive>
   <router-view :key="this.$route.path" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view :key="this.$route.path" v-if="!$route.meta.keepAlive"></router-view>

2、对于多层跳转,比如,一个列表页(a)、详情页(b)和详情扩展页(c),a -> b页面,a是缓存页,b需要在每次打开时,重新渲染;

b -> c页面,此时b需要被缓存,从c返回时,需要b保持不变。建议用一下方式:

<keep-alive :include="[‘A‘,‘B‘]">
     <router-view></router-view>
</keep-alive>

对于第二种方法官方提供三个属性:

  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[‘a‘, ‘b‘]">
  <component :is="view"></component>
</keep-alive>

此处需要注意:

  1、第二种方法需要路由入口必须唯一(即:页面当中只有一个<router-view></router-view>),否则缓冲无效(路由都被缓冲)

  2、:include="[‘A‘, ‘B‘]" 其中 A B 代表路由的name值

  3、不管第一种还是第二种方法一旦利用$destory销毁当前组件,则该组件将不被缓冲

以上两种用法根据不同需求进行选择,利用第二种方式一定要注意路由入口唯一问题,还有就是第二种方式更合适和vuex配合

以下是自己在项目中的做法,由于当时搭建的适合用了两个<router-view></router-view>,所以放弃了第二种方法,但是属于多层跳转
A表示类别页面
B表示详情页面
C表示详情拓展页面

需求:A进入B(不缓冲),B进入C(不缓冲),C进入B(有修改不缓冲,反之修改),B进入A(有修改不缓冲(此处的修改可能发生在C里面),反之修改)

A组件代码:

beforeRouteEnter(to, from, next){
   to.meta.keepAlive = true;
   next(vm => {
       if (from.path.indexOf("projectDetail") < 0 && from.path != "/" && from.path != "/login") {
            //自己逻辑代码
             vm.status = 0;
             vm.getProjectList();
       } 
        if (from.path.indexOf("projectDetail") > -1 && sessionStorage.getItem("reload") == "true") {
           //自己逻辑代码
            vm.status = 0;
            vm.getProjectList();
        }
   })
}    

此处判断 ‘/’ 防止在当前页面刷新,判断 ‘/login’防止当登陆接口调用两次

判断 sessionStorage.getItem("reload") 记录一个全局状态,判断B进入A(有修改不缓冲(此处的修改可能发生在C里面),反之修改)

B组件代码:

beforeRouteEnter(to, from, next){
    to.meta.keepAlive = true;
    next(vm => {
      if (from.path.indexOf("projectList") > -1 || from.path == "/") {
            //自己逻辑代码
            vm.status = 1;
            vm.catalogIndex = "0-0";
            vm.getProjectDetail();
       }
        //这里把页面初始值重新赋值,以刷新页面(C进入B)
        //状态C里面记录
       if(vm.$route.meta.isBuffer){
            //自己逻辑代码
             sessionStorage.setItem("reload", true);  //刷新项目列表
             vm.$route.meta.isBuffer = false;         //恢复初始值
             vm.status = 1;
             vm.catalogIndex = "0-0";
             vm.getProjectDetail();
        }
   })
}        

此处判断 ‘/’ 防止在当前页面刷新,判断 ‘/login’防止当登陆接口调用两次

C组件代码:

beforeRouteLeave (to, from, next) {
    if (to.path.indexOf("projectDetail") > -1 && to.query.id && this.isBuffer) {
           //自己逻辑代码
            to.meta.keepAlive = false;
            to.meta.isBuffer = true;   
     }
     next()
 }

this.isBuffer表示修改状态默认false,有修改则改为true,用于刷新B组件

以上仅共参考,可能有不对的地方,希望指出

vue 利用keep-alive进行缓冲 注意事项

标签:全局   实例   默认   from   状态   code   --   route   类别   

原文地址:https://www.cnblogs.com/little-baby/p/14268897.html

版权声明:完美者 发表于 2021-01-14 10:37:47。
转载请注明:vue 利用keep-alive进行缓冲 注意事项 | 完美导航

暂无评论

暂无评论...