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

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

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

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

// 用于记录历史记录 实现页面缓存
let history = window.sessionStorage.getItem("history");
if (!history) {
  history = "[]";
}
history = JSON.parse(history);
// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 获取当前历史记录的长度
  const historyLength = history.length;
  // 检查是否是后退操作
  if (historyLength >= 2 && history[historyLength - 2].path === to.path) {
    // 后退操作
    console.log("路由后退");
    // 移除当前路由
    history.pop();
    if (to.meta.pageLevel != history[history.length - 1].pageLevel) {
      to.meta.pageLevel = history[history.length - 1].pageLevel;
    }
    // 设置目标路由是否需要缓存 因方法为全局的所以进行这个判断来限制页面缓存
    if(to.meta.hasOwnProperty("isPageCache")&&to.meta.isPageCache==true){
      // to.meta.keepAlive = true;
      // from.meta.keepAlive = false;
    }
  } else {
    // 前进操作
    console.log("路由前进");
    if (!from.meta.hasOwnProperty("pageLevel")) from.meta.pageLevel = 0;
    //设置路由进入的页面层级数
    to.meta.pageLevel = from.meta.pageLevel + 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;
        vm.$nextTick(() => {
          vm.$refs[refName].scrollTop = parseInt(to.meta.scrollTop);
        });
      } 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;
      }
    }
    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>