「Vue」keep-alive 界面保持+界面缓存清除

项目需求

• Vue项目 列表数据跳转到详情界面，从详情界面返回时列表数据保持，从其他地方进入列表时，列表会重新渲染

具体修改

• 在路由文件中选择你将要保活的页面
  – 例如（在meta中加入keepAlive:true）

  {
    path: '/redeemlist',
    component: redeemlist,
    name: 'redeemlist',
    meta: {
      title: '',
      keepAlive: true,
    }

• 修改router-view

    <!-- 可以被缓存的视图组件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
     <!-- 不可以被缓存的视图组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>

• 在需要缓存的界面（name:redeemlist）

  beforeRouteLeave(to, from, next) {
    if (to.name === "redeemDetails") {
      from.meta.keepAlive = true;
      from.meta.savedPosition = this.$refs.success.scrollTop;
    } else {
      keepAlive(this);
    }
      next();
  },
  watch: {
    $route(to, from) {
      // 对路由变化作出响应…
      // debugger;
      if (from.name === "redeemStatus" && to.name === "mine" || from.name === "redeemDetails" && to.name === "mine" ) {
        keepAlive(this);
      }
    },
  },

• 在详情页做下面设置

  beforeRouteLeave(to, from, next) {
    if (to.path == "/redeemlist") {
      to.meta.keepAlive = true;
    }
    this.$nextTick(() =>{
      next();
    })
  },

• 下面就是对上面keepAlive函数的解释

export default function keepAlive(vm) {
    if (vm.$vnode && vm.$vnode.data.keepAlive) {
      if (
        vm.$vnode.parent &&
        vm.$vnode.parent.componentInstance &&
        vm.$vnode.parent.componentInstance.cache
      ) {
        if (vm.$vnode.componentOptions) {
          const key =
            vm.$vnode.key == null
              ? vm.$vnode.componentOptions.Ctor.cid +
                (vm.$vnode.componentOptions.tag
                  ? `::${vm.$vnode.componentOptions.tag}`
                  : "")
              : vm.$vnode.key;
          const cache = vm.$vnode.parent.componentInstance.cache;
          const keys = vm.$vnode.parent.componentInstance.keys;
          if (cache[key]) {
            if (keys.length) {
              const index = keys.indexOf(key);
              if (index > -1) {
                keys.splice(index, 1);
              }
            }
            delete cache[key];
          }
        }
      }
    }
  }

• 完结
• 希望大家支持一下我的公众号