vue2中页面数据及滚动条缓存

vue2、vue3中页面数据及滚动条缓存(步骤以vue2为例，vue3类似)：

一、页面数据及滚动条缓存核心代码：

1、在main.js文件中添加如下代码：

// 去重
function deduplicateByKey(arr, key) {
  const seen = new Set();
  return arr.filter((item) => {
    const value = item[key];
    if (!seen.has(value)) {
      seen.add(value);
      return true;
    }
    return false;
  });
}
// 方法：删除数组中指定索引后面的所有元素
function removeAfterIndex(arr, index) {
  // 检查索引是否有效
  if (index < 0 || index >= arr.length) {
    console.warn("索引无效，数组保持不变");
    return arr;
  }
  // 从索引+1的位置开始，删除后面所有元素
  arr.splice(index + 1);
  return arr;
}

// 用于记录历史记录 实现页面缓存
let history = window.sessionStorage.getItem("history");
if (!history) {
  history = "[]";
}
history = JSON.parse(history);
// // 全局前置守卫
router.beforeEach((to, from, next) => {
  // 获取当前历史记录的长度
  const historyLength = history.length;
  if (history && history.length > 0) {
    history.forEach((item, index) => {
      item['pageLevel'] = index + 1;
    })
  }
  // 检查是否是后退操作
  if (historyLength >= 2 && history[historyLength - 2].path === to.path) {
    // 后退操作
    console.log("路由后退");
    // 移除当前路由
    history.pop();
  } else {
    // 前进操作
    console.log("路由前进");
    //设置路由进入的页面层级数
    to.meta.pageLevel = history.length + 1;
    // 添加当前路由到历史记录
    if (history.length === 0 || to.path != history[history.length - 1].path) {
      history.push({
        path: to.path,
        pageLevel: to.meta.pageLevel,
        refName: "scrollContainerDiv"
      });
    }
  }
  if (to.meta.pageLevel != history[history.length - 1].pageLevel) {
    to.meta.pageLevel = history[history.length - 1].pageLevel;
  }
  window.sessionStorage.setItem("history", JSON.stringify(history));
  next();
});

1、定义公共的mixins，在utils文件夹下创建mixins文件夹，并在该文件夹下创建myScrollMinxin.js文件，myScrollMinxin.js里的代码如下：

export default {
  beforeRouteEnter(to, from, next) {
    let refName = to.meta.hasOwnProperty("refName") ? to.meta.refName : "";
    // 可以通过传一个回调给 next 来访问组件实例
    next(vm => {
      // 通过 `vm` 访问组件实例
      if (from.meta.pageLevel <= to.meta.pageLevel) {
        to.meta.scrollTop = 0;
      } else {
        if (to.meta.hasOwnProperty("scrollTop")) {
          vm.$nextTick(() => {
            vm.$refs[refName].scrollTop = parseInt(to.meta.scrollTop);
          });
        }
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    if (to.meta.hasOwnProperty("refName")) {
      let refName = to.meta.refName;
      if (from.meta.hasOwnProperty("scrollTop")) {
        from.meta.scrollTop = this.$refs[refName].scrollTop;
      }
    }
    if (from.meta.keepAlive && (to.meta.pageLevel <= from.meta.pageLevel) && to.meta.pageLevel != 0) {
      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();
  }
};

二、页面数据及滚动条缓存调用步骤如下（代码已封装目前只需要按如下步骤调用即可，若新项目需要页面数据及滚动条缓存可将第一步核心代码引入项目，再调用步骤二）：

1、在路由router文件夹下的index.js文件中新增自己路由的meta字段添加如下代码：

   meta: {
      keepAlive: true,
      pageLevel: 0,
      refName: "scrollContainerDiv",
      scrollTop: 0,
    }

2、在需要数据和滚动条缓存的.vue文件中添加如下代码：

<template>
   <div>
       //你的代码
       //需要滚动部分
       <div class="my-compont-box" :ref="$route.meta.refName">
           // 1、你的代码没有tab切换的内容 就不需要在
           // 2、你的代码有tab切换的内容；类似如下需要在tab切换事件中添加 this.$refs[this.$route.meta.refName].scrollTop = 0：
           //（1） <component :is="tabComponents[tabIndex]"></component>
           //（2）<组件1 v-if='条件1'></组件1>
           //     <组件2 v-else-if='条件2'></组件2>
           //     ...
       </div>
   </div>
</template>
<script>
//引入封装的 myScrollMinxin.js
import myScrollMinxin from "@/utils/mixins/myScrollMinxin.js";
export default {
    //在 mixins 注入自定义的 myScrollMinxin
    mixins: [myScrollMinxin],
    methods: {
        //2、你的代码有tab切换的内容需要在tab切换事件中添加
        //this.$refs[this.$route.meta.refName].scrollTop = 0
        tabChangeHandler(index){
            this.$refs[this.$route.meta.refName].scrollTop = 0
        }
    }
}
</script>