vue使用缓存产生的问题如何解决？

Question

vue中，一个列表页从列表详情页返回需要被缓存，从其他页面进入列表不需要缓存，我在main.js中设置

router.beforeEach((to, from, next) => {
    Vue.prototype.fromurl = from.path;
    Vue.prototype.tourl = to.meta;
    if(from.path.substr(3,4)=='shop'){
            var bostonetop = $(window).scrollTop();
            localStorage.setItem("bostonetop",bostonetop) 
     }
    else if(from.path.substr(3,13)=='special_field'){
            var bostonetop = $(window).scrollTop();
            localStorage.setItem("bostonetop",bostonetop) 
     }
    if (to.path.substr(3,4) =='shop') {
        if(from.path.substr(3,14)=='product_detail'){
          // 思路是进入列表页并从详情页返回加载缓存，其他不加载缓存
            to.meta.keepAlive = true;
            var bostonetop = localStorage.getItem("bostonetop") 
            $('html,body').animate({scrollTop:bostonetop}, 10);
        }
     } 
    else if (to.path.substr(3,13)=='special_field') {
        if(from.path.substr(3,14)=='product_detail'){
            to.meta.keepAlive = true;
            var bostonetop = localStorage.getItem("bostonetop") 
            $('html,body').animate({scrollTop:bostonetop}, 10);
        }
    }else{
         to.meta.keepAlive = false
     }
     next()
})

App.vue

<template>
  <div id="app">
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

router.js

 {
   path: '/t/shop',
   name: 'shop',
   component: shop,      
   meta: {
           keepAlive: true 
           }
  },

RT，思路是进入该列表页并从详情页返回加载缓存，其他不加载缓存。但是实际中所有页面进入该页面中都产生了缓存；这不是我想要的，请问上述问题应该如何解决？如何从其他页面进入该页面不加载缓存并从详情返回加载缓存？

Answer 1

将列表页设置keepAlive:true
默认需要缓存

beforeRouteEnter钩子中判断from然后决定是否需要重新调用获取数据接口
伪代码如下

new Vue({
    methods:{
        //获取列表数据
        getData(){
            //数据请求部分省略
            this.data = res.data;
        }
    },
    beforeRouteEnter(to, from, next){
        //如果不是从详情页进入此组件
        if(from.path !== '详情页path'){
            //组件实例初始化后
             next(vm => {
                   //重新获取数据
                   vm.getData()
              });
        }
        //else的情况不用判断. 因为之前路由中设置了`keepAlive:true` 默认会缓存
    }
})

题主可以试试这个思路
拙见,不足之处望指出

Answer 2

别用下面这种方式判定是否keepalive:

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

这么搞每次$route.meta.keepAlive变化除了会控制keep-alive启不启用还会触发重新加载一个router-view,如果你碰见一个keep-alive内部页面里还有keep-alive的情况，这么写会让内部keep-alive里的组件在某些情况下重复加载。
推荐按官网的用法:

<keep-alive :include='cacheArr'>
 <router-view></router-view>
</keep-alive>

cacheArr里面存放需要缓存的组件的name,可以放在vuex里进行动态控制，每次beforeRouteLeave时控制cacheArr的内容。
可以把keep-alive当成一个普通组件，该组件会在每次render的时候去缓存其内部的组件，传入属性include和exclude是判定是否缓存该组件的依据，keep-alive在mounted阶段添加了include和exclude的watch事件，你动态控制include和exclude里的内容时，keep-alive也会动态修改缓存内容。

Answer 3

看文档呗，动态修改keep-alive组件的 exclude值

Answer 4

可以借鉴一下这个文章https://www.cnblogs.com/sysuh...

Answer 5

不用你写的那么麻烦：

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