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

max_YaoXC

已于 2022-04-12 00:20:53 修改

阅读量1.8k

点赞数 5

文章标签：缓存 webview p2p

于 2022-02-19 03:07:06 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_57265841/article/details/123013843

版权

该博客详细介绍了在Vue中使用keepAlive缓存时遇到的问题及解决方案。当从A页面->B页面->C页面，然后回退到B页面，B页面会保留之前的缓存。为避免这种情况，可以通过检查和操作Vue实例的$vnode属性来手动清除不需要的缓存。在beforeRouteLeave路由守卫中，根据目标页面判断是否需要清除缓存，从而实现精确的缓存控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用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 里做移除缓存处理

案例 :

//这是当前页配置的路由
{
    path: '/myDeal/:title',
    component: myDeal,
    meta:{
      keepAlive:true
    }
  },

 //需要进行缓存的页面 使用组件内路由守卫beforeRouteLeave
 beforeRouteLeave(to, from, next) {
    //判断将要去的组件名或者组件路径
    if (to.name == "orderDetails") {
      //在当前页进行设置缓存为true
      from.meta.keepAlive = true;
    } else {
      // 如果是去往其他页面就执行一下操作
      // 清除上一次保留的keepAlive缓存
      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;
        }
      }
    }
    next();
  },

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