脚本宝典收集整理的这篇文章主要介绍了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缓存清除问题案例详解的文章就介绍到这了,更多相关vue keepAlive缓存清除问题内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

脚本宝典总结

以上是脚本宝典为你收集整理的vue keepAlive缓存清除问题案例详解全部内容，希望文章能够帮你解决vue keepAlive缓存清除问题案例详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。