一.vue keep-alive踩坑,删除keep-alive缓存

13,274 阅读2分钟

前言:之前有一个项目,有两种权限的账户,页面主要就是一个首页和N多个详情页,从详情页返回首页的时候页面要求kepp-alive缓存,很快这个需求就ok了,但是切换了下账号,登录进来进入详情页后,返回首页,居然显示的是上一个账号缓存的内容,找了好久,终于看到网上大佬写的,解决了这个问题

1.keep-alive

keep-alive 
是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

使用方法:

1.结合路由进行使用

keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

2.动态匹配路由(所有的组件都必须给name)

  • include: 字符串或正则表达式。只有匹配的组件会被缓存。
  • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

<keep-alive include="test-keep-alive">
  <!-- 将缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

<keep-alive exclude="test-keep-alive">
  <!-- 将不缓存name为test-keep-alive的组件 -->
  <component></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

export default {
  name: 'test-keep-alive',
  data () {
    return {
        includedComponents: "test-keep-alive"
    }
  }
}

3.keep-alive的生命周期

当引入keep-alive的时候,页面第一次进入,钩子的触发顺序:

created ->  mounted->   activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。


4.使用方法

  • 首页是A页面
  • B页面跳转到A,A页面需要缓存
  • C页面跳转到A,A页面不需要被缓存

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 需要被缓存
    }
}

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
         // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时,让 A 缓存,即不刷新
        next();
    }
};

export default {
    data() {
        return {};
    },
    methods: {},
    beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存,即刷新
        next();
    }
};

5. 删除keep-alive的方法

1.可以使用 this.$destroy() 清除掉页面存在的keep-alive,但是这样子之后不会再产生keep-alive缓存

2.最佳方法:

看看就好,直接复制粘贴就可以使用,这样子的话,每次退出登录的时候都会把keep-alive删除。

  //删除切换账号,之前的账号留下的keep-alvie
  beforeRouteLeave:function(to, from, next){
      if(to.name=='Login'||to.name=='login'){
          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();
  },

3.使用vuex,大概原理是每次把需要缓存的组件存起来,退出清空,大概是这样吧,没这样使用过...


以自己的一些理解和网上大佬的心得结合,看看就好,欢迎大佬补充和纠正错误

                                                                                             -----愿物与我皆美好