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

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

1.keep-alive

使用方法：

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，大概原理是每次把需要缓存的组件存起来，退出清空，大概是这样吧，没这样使用过...

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

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