比较完美完成返回滚动实现

src/lib/eventBus.js

@@ -0,0 +1,5 @@
+import { EventEmitter } from "events";
+
+const eventBus = new EventEmitter();
+
+export default eventBus;

src/lib/useBackSnaps.js

@@ -0,0 +1,122 @@
+import { onMounted, onActivated, nextTick } from "vue";
+import { useStore } from "vuex";
+
+//设置
+let config = {
+  elName: "mainContent", //#元素名称
+  log: false, //是否显示log
+};
+
+const backSnaps = []; //返回快照数组
+let lashHistoryLength = 0; //上次History的长度
+let lastHistoryPos = -1; //上次History的位置
+
+const tsArr = [];
+
+export const test = () => {
+  tsArr.push("tsArr");
+  console.log(tsArr);
+};
+
+export function cfg(cfg){
+  config = {...config, ...cfg}
+}
+
+export function useBackSnaps() {
+  
+  onActivated(() => {
+    restore();
+  });
+  onMounted(() => {
+    restore();
+  });
+
+  return {};
+}
+
+export const saveBackSnaps = () => {
+  // console.log("路由afterEach: 当前页面 ", window.location);
+  // console.log("路由afterEach: ", window.history);
+  // console.log("路由afterEach: ", from.fullPath, " to ", to.fullPath);
+
+  // 判断动作是？
+  const moveOn =
+    lashHistoryLength == 0 ||
+    lastHistoryPos == -1 ||
+    window.history.length != lashHistoryLength ||
+    window.history.state.position - lastHistoryPos > 0;
+  
+  //查找元素...
+  const $content = document.querySelector(`#${config.elName}`);
+  // if ($content)
+  //   console.log("路由afterEach: ", $content, $content.scrollTop);
+  const idx = window.history.state.position + (moveOn ? -1 : 1);
+  if(window.history.length != lashHistoryLength){ //新路由，更新backSnaps数组长度
+    backSnaps.splice(idx + 1, backSnaps.length - idx)
+  }
+  //保存原来的
+  lashHistoryLength = window.history.length;
+  lastHistoryPos = window.history.state.position;
+  //保存
+  if (idx > -1) {
+    const backSnap = {
+      idx,
+      scrollTop: $content ? $content.scrollTop : 0,
+    };
+    // console.log("路由afterEach: ", backSnap);
+    if (backSnaps.length < idx + 1) backSnaps.length = idx + 1;
+    backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...backSnap} : backSnap
+    // backSnaps[idx] = backSnap;
+    if (config.log)
+      console.log("useBackSnaps: 保存上个页面", backSnaps);
+  }
+};
+
+export const saveSnap = (snap)=>{
+  const idx = window.history.state.position;
+  //保存
+  if (idx > -1) {
+    // const backSnap = {
+    //   idx,
+    //   url: window.location.href,
+    // };
+    // // console.log("路由afterEach: ", backSnap);
+    if (backSnaps.length < idx + 1) backSnaps.length = idx + 1;
+    backSnaps[idx] = backSnaps[idx] ? {...backSnaps[idx], ...{other: snap}} : {other: snap}
+    // backSnaps[idx] = backSnap;
+    if (config.log)
+      console.log("useBackSnaps: 保存当前页面", backSnaps);
+  }
+}
+
+export const getScrollTop = () => {
+  return backSnaps[window.history.state.position]
+    ? backSnaps[window.history.state.position].scrollTop
+    : 0;
+};
+
+export const getSnap=()=>{
+  return backSnaps[window.history.state.position]
+    ? backSnaps[window.history.state.position]
+    : null;
+}
+
+// 恢复scrollTop设置
+const restore = () => {
+  if (config.log)
+    console.log(
+      `useBackSnaps: 查找上次"#${config.elName}"保存的设置...`
+    );
+  if (backSnaps[window.history.state.position]) {
+    nextTick(() => {
+      document.getElementById(config.elName).scrollTop =
+        backSnaps[window.history.state.position].scrollTop;
+    });
+    if (config.log)
+      console.log(
+        `useBackSnaps: 恢复${config.elName}的scrollTop为${
+          backSnaps[window.history.state.position].scrollTop
+        }`
+      );
+  }
+};