vue的keep-alive组件清除缓存

场景是,从列表跳转到详情页,再次返回列表页时要记住之前列表页的页码、搜索关键词等,采用keepa-live缓存组件。
在路由文件配置meta.keepAlive:
{
  path: '/List',
  name: 'List',
  component: List,
  meta: { keepAlive: true }
}
修改App.vue的router-view:
<keep-alive>
 <router-view :key="$route.name" v-if="$route.meta.keepAlive"/>
</keep-alive>
<router-view :key="$route.name" v-if="!$route.meta.keepAlive"/>

从别的页面进列表页不能还读取缓存,因此在离开的时候要清除缓存:

beforeRouteLeave(to, from, next) {
    if (to.path == "/Detail") {
      from.meta.keepAlive = true;
    } else {
       let vnode = that.$vnode
       let parentVnode = vnode && vnode.parent;
	   if (parentVnode && parentVnode.componentInstance && parentVnode.componentInstance.cache) {
	     var key = vnode.key == null
	       ? vnode.componentOptions.Ctor.cid + (vnode.componentOptions.tag ? `::${vnode.componentOptions.tag}` : '')
	       : vnode.key;
	     var cache = parentVnode.componentInstance.cache;
	     var keys  = parentVnode.componentInstance.keys;
	
	     if (cache[key]) {
	       that.$destroy()
	       // remove key
	       if (keys.length) {
	         var index = keys.indexOf(key)
	         if (index > -1) {
	             keys.splice(index, 1)
	         }
	       }
	
	       cache[key] = null
	     }
	   }
	   }
	   next();
	 }

特别注意一点,如果项目中有多层router-view嵌套,那就不要在App.vue里写,而应该在最底下一层router-view所在的位置写,否则缓存会清除失败。

发布了10 篇原创文章 · 获赞 15 · 访问量 5万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 黑客帝国 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览