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所在的位置写，否则缓存会清除失败。