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

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组件

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