vue中keepAlive缓存清除问题的示例分析

小编给大家分享一下vue中keepAlive缓存清除问题的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

vue项目中经常会用到keepalive来做缓存，在应付基本要求上可以说非常方便。但是遇到同一个页面，根据条件不同，分别缓存或者不缓存，就有些麻烦了。

首先先把坑列出来：

1.

<keep-alive v-if="xxx">
          <router-view />
</keep-alive>
<keep-alive v-else>
          <router-view />
</keep-alive>

网上很多都是这种方法，用了这种方法，已缓存的东西是没法删掉的，其实这个方法是把缓存页面和不缓存页面完全分成了两个组件展示，虽然一般情况下看着是那么回事，其实就是根据你的条件，不同时候展示不同的组件来看。

2.

vm.$destroy()

当想到把已有的缓存去掉，我估计大多数人第一反应都是想着怎么把缓存删掉，于是乎我也尝试想办法把缓存删掉。然后调用了vue的销毁方法。当销毁后你会很开心的发现实现了！缓存删掉了~ 于是乎你就以为改好了，跑去继续开发别的东西。突然某一天你发现，诶？ 我这个页面怎么不缓存了？ 经过一番排查 发现了调用过$destroy()的页面就不会再缓存了。。

最后我的解决方案：

Template

<keep-alive :include="keepAlive.join(',')">
         <router-view />
</keep-alive>

vuex

keepAlive: [
        '/joinManage/register/add-step1',
        '/joinManage/register/add-step2',
        '/joinManage/register/add-step3',
        '/joinManage/config/add-step1',
        '/joinManage/config/add-step2',
        '/joinManage/config/add-step3',
        '/joinManage/config/add-step4',
        '/joinManage/config/add-step5',
    ],

利用include+vuex，动态改变所需缓存页面。include所接受的为组件的name（此处我嫌命名麻烦，直接用path命名了， 其实并不是使用path）

这样的话，当我们某个页面需要缓存，我们就把其name加入keepalive数组中，不需要就删除对应的。这样就可以实现keepAlive的缓存删除效果了

以上是“vue中keepAlive缓存清除问题的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！