vue针对指定跳转页面做缓存

组件缓存处理

beforeRouteLeave(to, from, next) {
    //页面缓存处理
    // console.log("to, from", to, from)
    if (["XXX"].includes(to.name)) {
    // 仅当当前路由点进xxx时，当前页面才会缓存
      from.meta.keepAlive = true;
    } else {
      if (
        this.$vnode &&
        this.$vnode.data.keepAlive &&
        from.name == "XXX"
      ) {
        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];
            }
          }
        }
        from.meta.keepAlive = true;
      }
    }
    next();
  },

路由需设置(否则会首次不缓存)

{
    path: "/XXX",
    name: "XXX",
    component: XXX,
    meta: {
      keepAlive: true,
    },
  },