vue keep-alive 不生效 以及前进 后退 对数据刷新和保留缓存操作

https://blog.csdn.net/sinat_37255207/article/details/89373825

 

因为项目Vue router 连续嵌套了好几层 首先检查keep-alive的 include 和including 属性是否应用正确

include 是缓存包含  including是缓存相反

项目中嵌套了好几层keep-alive 那个页面需要缓存 应当给当前页面 父级最近的router 外面加keep-alive  而不是APP.vue 的最外层

因为所做的项目中有很多 分页页面 分页内容中还有 查看详情页面 那么点击查看详情后  跳入详情 在返回 当前 分页页面的缓存就应当 保留

我的方案如下

//分页父级的router   $store.state.keepAlive 是vuex全局变量用于储存
<template>
        <keep-alive :include="$store.state.keepAlive">
 
 
          <router-view/>  
        </keep-alive>
</template>

 

//点击查看详情
 click(str){
 
       //储存需要缓存的页面name 
       store.state.keepAlive=[this.$options.name]; 
       
       setTimeout(()=>{
            this.$router.push('')
       },0)
      
         
         
    },

最后 根据自己的需要 在指定场景清除  store.state.keepAlive