一直使用keepalive进行缓存,最近出现一个问题,发现在beforeRouteLeave里对meta里的keepalive进行设置false和true的时候,第一次返回到 使用了keepalive的页面时,页面没有缓存而是重新刷新了,第二次进入的时候才进行了缓存,找了很多的方法尝试都没有效果,最后发现,只要在router.js里设置keepAlive为true,离开或者进入到页面的时候不要对keepAlive再次进行修改就不会出现第一次不缓存的情况,但是同时出现了页面一直在第一次缓存的状态里,所以在离开页面都 的时候做了如下操作:
beforeRouteLeave(to, from, next) {
if(to.name === 'serviceDetails'){
next();
}else {
let vnode = this.$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]) {
this.$destroy()
// remove key
if (keys.length) {
var index = keys.indexOf(key)
if (index > -1) {
keys.splice(index, 1)
}
}
cache[key] = null
}
}
next();
}
},
当我前往的页面不是”serviceDetails“的时候,就手动销毁keepAlive的缓存,同样可以达到不缓存页面的效果
注:keepAlive是需要手动销毁缓存的,否则缓存会一直存在,并且是第一次缓存的数据