vue-element-admin 删除Keep-alive缓存
vue-element-admin
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
项目地址:https://gitcode.com/gh_mirrors/vu/vue-element-admin
免费下载资源
·
前篇:vue-element-admin 快捷导航(标签栏导航)切换不刷新问题
上面文章解决切换导航不刷新问题,然后随之而来的问题是:当标签栏关闭后,重新打开,由于缓存还在依然不会刷新,这就有点尴尬了,因为文档说过无法动态删除缓存,本来没觉得这是问题来着。。。。
所以,遇到问题就得解决问题咯,继续百度寻找解决办法,于是找到个解决方法,目前来看是行之有效的,特此拿来收藏
//在页面内的 beforeRouteLeave路由守卫里面操作
beforeRouteLeave(to,from,next){
// 拿到keep-alive的cache
// 此处我是因为多嵌套了一层 router-view
// 所以要向上取2层才能访问到keep-alive组件
const cache = this.$vnode.parent.parent.componentInstance.cache
// 拿到keep-alive的keys
const keys = this.$vnode.parent.parent.componentInstance.keys
// 获取keep-alive第一个子组件的key值
// 此处我是因为多嵌套了一层 router-view
// 所以要多向上取一次才是keep-alive的第一层子组件 router-view
const key = this.$vnode.parent.key == null
? this.$vnode.parent.componentOptions.Ctor.cid + (this.$vnode.parent.componentOptions.tag ? `::${this.$vnode.parent.componentOptions.tag}` : '')
: this.$vnode.parent.key;
// 我们的业务(判断当前所有打开的标签页是否有当前页面),examManagement为当前页面组件的Name
const flag = this.$store.state.tagsView.visitedViews.find(tag => tag.name === "examManagement")
if(!flag){
if(keys.length) {
let index = keys.indexOf(key)
// 删除存在keep-alive keys列表内的组件key
if(index > -1) keys.splice(index,1)
}
// 删除当前组件的缓存
delete cache[key]
this.$destroy(); // 缓存删除了,顺便也让当前组件销毁
}
next()
},
参考文章:https://blog.csdn.net/qq_41709082/article/details/121637137
GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
更多推荐
已为社区贡献6条内容
所有评论(0)