A-A+

vue keep-alive

2020年09月22日 vue 暂无评论 阅读 1 次

vue keep-alive

  1. 首页是A页面
    B页面跳转到A,A页面需要缓存
    C页面跳转到A,A页面不需要被缓存
 beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存,即刷新
        next();
    }

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();
  },

vue 组件缓存清除实践

demo

希望keep-alive能增加可以动态删除已缓存组件的功能

标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录