Jeecg-Boot keepAlive 清除缓存
解决jeecgboot在点击关闭tab页签时,清除keep-alive的缓存借助Vuex维护一个全局的状态,在beforeRouteLeave路由钩子中,清除缓存,方法如下,借用大神的源码参考:Vue 全站缓存之 keep-alive : 动态移除缓存实现过程:store/moudles/app.js 中维护 closePagestate: {closePage: {}}...
·
解决jeecgboot在点击关闭tab页签时,清除keep-alive的缓存
借助Vuex维护一个全局的状态,在beforeRouteLeave路由钩子中,清除缓存,方法如下,借用大神的源码
参考:Vue 全站缓存之 keep-alive : 动态移除缓存
实现过程:
- store/moudles/app.js 中维护 closePage
state: {
closePage: {}
}
- TabLayout.vue 中的remove方法触发状态改变
this.$store.dispatch('setClosePage', {[key]: true})
- main.js Vue全局混入
//使用Vue.mixin的方法拦截了路由离开事件,并在该拦截方法中实现了销毁页面缓存的功能。
Vue.mixin({
beforeRouteLeave:function(to, from, next){
let key1 = this.$route.fullPath;
if(this.$store.state.app.closePage[key1]){
from.meta.keepAlive = false;
}
if (!from.meta.keepAlive)
{//此处判断是如果返回上一层,你可以根据自己的业务更改此处的判断逻辑,酌情决定是否摧毁本层缓存。
if (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.$destroy();
}
next();
}
});
- 在需要使用缓存的页面开启缓存,同时再created钩子中添加默认状态
// 针对当前页面进行缓存
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
vm.$route.meta.keepAlive = true;
})
}
created(){
let key = this.$route.fullPath
this.$store.dispatch('setClosePage', {[key]: false})
}
说明: 我是利用路由的fullpath 做为key。
更多推荐
已为社区贡献1条内容
所有评论(0)