vue keep-alive缓存的使用及遇到的问题

关于vue keep-alive缓存的使用

官网介绍地址：https://cn.vuejs.org/v2/api/#keep-alive

 

一般使用

通常我们使用keep-alive 缓存页面的方式是

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

 

{
  path: '/report1',
  name: 'report1',
  component: report1,
  meta: {
    keepAlive: true // 需要被缓存
  }
},

 

我们在路由的meta信息中配置keepAlive属性，然后在渲染时候根据该属性，分别用不同的router-view。第一个router-view包含在keep-view中，这样keepAlive的true的页面就会进行缓存了。如果把true置成false就是走第二个router-view，并重新实例化该组件， 当然，之前缓存过的组件还在。

 

缓存的组件会有两个生命周期activated(激活[进入缓存页面])，deactivated(停用[离开缓存组件])

因为缓存的组件并不会被销毁，再次进入页面created/mounted生命周期并不存在。

 

注意：当

遇到的问题

A是期望的页面

1.我们想从A---> B --->A 的时候缓存A页面（B返回A时A页面保存了状态）；但是从A-->C--->A时不缓存（C返回A时A页面需要刷新）/ 或者B-->A某种情况下要刷新

 

解决办法，结合beforeRouteEnter/beforeRouteLeave 和activated周期使用

参考：

https://blog.csdn.net/qq_30114149/article/details/78415030?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

2.从0（首页） ---> A --->B --->A 时需要A页面保存状态(缓存)；但是A返回0（首页）后，再次进入A页面的时候需要刷新，即0（首页）--->A---->0(首页）--->A刷新。我想使用$destory()，虽然清除了缓存，但是被$destory()过的组件，之后就不会缓存，keep-alive失效。

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


computed: {
  alivevue () { // 缓存组件管理
    return this.$store.state.alivevue
  }
},

 

解决办法：使用keep-alive的include/exclude属性,结合vuex。当进入A页面时，将组件的名字加入到alivevue中，离开并进入首页时去除。（include会被监听生成和清除缓存）

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

注意：include 中对应的是组件的名字name

 

其他方式，找到缓存对象，手动清空

 

参考解决方法：https://blog.csdn.net/zjh1002492540/article/details/79603584

参考解决方法：https://www.cnblogs.com/mankii/p/13746051.html

参考学习：https://www.cnblogs.com/everlose/p/12541934.html(keep-alive缓存的原理)