vue中keepAlive缓存清除的问题

11 篇文章 0 订阅

 

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

  • 2
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值