前篇: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 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐