如果使用 this.$destroy()
会造成相应组件页面之后也不能keepAlive缓存,于是找到下面的方法。另外把监控路由离开事件的this.$destroy()
写在Vue.mixin
里,或者写在单独作为mixin引用的.vue
文件里可以方便做统一配置。
下面的this.$store.state.app.ifDestory
和this.$store.commit('SET_COMPAGE_DESTORY', false)
是项目需求里的具体判断条件,可根据实际情况调整成其他条件。
参考链接:
https://juejin.im/post/5b610da4e51d45195c07720d
beforeRouteLeave(to, from, next){
if (this.$store.state.app.ifDestory && this.$vnode && this.$vnode.data.keepAlive) {
if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache) {
if (this.$vnode.componentOptions) {
var key = this.$vnode.key == null
? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
: this.$vnode.key;
var cache = this.$vnode.parent.componentInstance.cache;
var keys = this.$vnode.parent.componentInstance.keys;
if (cache[key]) {
if (keys.length) {
var index = keys.indexOf(key);
if (index > -1) {
keys.splice(index, 1);
}
}
delete cache[key];
this.$store.commit('SET_COMPAGE_DESTORY', false)
}
}
}
}
next();
}