0
点赞
收藏
分享

微信扫一扫

手动移除keepAlive缓存;使用keepAlive缓存时,当前页做了缓存并且做了一些操作,在返回到上一页时,再次进入到当前页还保留着返回上一页时的操作效果。可用此方法

alonwang 2022-02-19 阅读 92

在使用keepAlive缓存时, 如果 A 页面 --> B 页面   做了操作   --> C页面   

再从 C页面返回 --> B页面 --> A 页面 页面除了点击返回和点击进入无其他操作

再次从 A 页面 --> B 页面 --> C 页面 页面除了点击返回和点击进入无其他操作

从C 页面 -- > B 页面时 B页面保留了上一次进入到B页面的缓存

解决方法 :

首先 : 获取到 this 实例对象  

  

找到 vue实例上的 this.$vnode 属性 和  this.$vnode.parent 属性

 

查看 this.$vnode 下的 componentInstance.cache 的变化

 查看并记录 this.$vnode.key 的变化

记录 this.$vnode.componentOptions.Ctor.cid  的变化

 查看 this.$vnode.componentOptions.tag 的值 变化

通过以上方式的帮助  使用以下代码可解决  

 //获取vue实例对象上的$vnode属性
      let vnode = this.$vnode;
      let parentVonde = vnode && vnode.parent;
      if (
        parentVonde &&
        parentVonde.componentInstance &&
        parentVonde.componentInstance.cache
      ) {
        var key =
          vnode.key == null
            ? vnode.componentOptions.Ctor.cid +
              (vnode.componentOptions.tag
                ? `::${vnode.componentOptions.tag}`
                : "")
            : vnode.key;
        var cache = parentVonde.componentInstance.cache;
        var keys = parentVonde.componentInstance.keys;
        if (cache[key]) {
          this.$destroy();
          // remove key
          if (keys.length) {
            var index = keys.indexOf(key);
            if (index > -1) {
              keys.splice(index, 1);
            }
          }
          cache[key] = null;
        }
      }

在不需要做缓存的页面时 在beforeRouteLeave 里 做 移除缓存处理

参考连接 : 说说VNode节点(Vue.js实现) - 染陌同学 - 博客园

举报

相关推荐

0 条评论