vue-element-admin 删除Keep-alive缓存

前景提要：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

标签：vue 前端