vue keepAlive缓存清除问题 vue keepAlive缓存清除问题案例详解

时间:2021-09-08 王的剑鞘&wkq 人气:0

想了解vue keepAlive缓存清除问题案例详解的相关内容吗，王的剑鞘&wkq在本文为您仔细讲解vue keepAlive缓存清除问题的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue,keepAlive缓存清除,vue,keepAlive缓存清除问题，下面大家一起来学习吧。

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

首先先把坑列出来：

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

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

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的缓存删除效果了

加载全部内容