vue使用keep-alive后清除缓存的方法

我这里说明一下找到this.$vnode.parent.componentInstance.cache;用这个代码找到cache需要在keep-alive下的子组件中直接打印才能使用。

https://www.jb51.net/article/219189.htm

https://www.jb51.net/article/219187.htm

 

vue清除指定缓存的方法（三个）

这里非常感谢这为大佬的博客，让我看的很清楚。

https://blog.csdn.net/qq_45351419/article/details/108879571

因为考虑到是需要通用的，我第一想到的全局路由但是这样会获取不到正确的this对象。然后就直接考虑使用路由守卫，本来是想用beforeRoutteEnter,这个虽然可以用next（vm=>{}）拿到对象但不是this

。所以最后还是采用了beforeRouteLeave这个钩子函数。没次调用路由需要用next（）进入下一个路由才行。详情看下面链接。

我这个唯一的问题就是维护缓存是在切换路由之后根据上面的标签页进行维护，所以可能会出现明明上面的标签页删除了，但还是有缓存，没有刷新页面。

我这个是没问题的，因为是在离开页面的时候开始更新缓存所以我需要缓存的页面就在进入页面前就确定了

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E7%94%A8%E7%9A%84%E9%85%8D%E7%BD%AE-api

项目框架用的vue-element-admin

https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

Vue.mixin({
  beforeRouteLeave:function (to, from, next){
    if(this._uid!=6){//这里我的项目不知道为什么总是会请求这个uid的路由就把他排除。
      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;
      var delKeys=[]
      var cachedViews=this.$store.state.tagsView.cachedViews//这里获取标签页list, 我的页面都是没有写name的，所以vue catch哪里存的好像是我的path。那这个也存path。
//找出需要删除的catch的key
      keys.forEach(key=>{
        let flag=false
        cachedViews.forEach(view=>{
          if(key.includes(view)){
            flag=true
          }
        })
        if(!flag){
          delKeys.push(key)
        }
      })
//删除catch和key,我没有进行组件的销毁，因为我觉得没必要，我只是不需要缓存就行了
      delKeys.forEach(key=>{
        var index = keys.indexOf(key);
        if (index > -1) {
          keys.splice(index, 1);
        }
        delete cache[key];
      })

    }
    next()
  }
})

我路由页面用全缓存，不要的再删除缓存。

   <transition name="fade-transform" mode="out-in">
<!--      <keep-alive :include="cachedViews">-->
      <keep-alive >
        <router-view v-if="cachedViews" :key="key" />
      </keep-alive>
    </transition>

tagsview组件被调用就更新一次

this.$store.state.tagsView.cachedViews

  mounted() {
    this.initTags()
    this.addTags()
  },
methods: {

   addTags() {
      const { name } = this.$route
      if (name) {
        this.$store.dispatch('tagsView/addView', this.$route)
      }
      return false
    },
    closeSelectedTag(view) {
      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      })
    },  
}

sores.js 我这里都是改成了path

const mutations = {
  
  ADD_CACHED_VIEW: (state, view) => {
    if (state.cachedViews.includes(view.path)) return
    if (!view.meta.noCache) {
      state.cachedViews.push(view.path)
    }
  },

  
  DEL_CACHED_VIEW: (state, view) => {
    const index = state.cachedViews.indexOf(view.path)
    index > -1 && state.cachedViews.splice(index, 1)
  },

 
}