简单实现列表页缓存浏览记录位置

实现需求的大致情况>>>我的项目有列表页和详情页,在点击详情按钮跳转前需要本地缓存当前window.scrollY (滚动Y轴位置),然后在路由组件中,添加scrollBehavior参数,自定义还原 滚动条位置就可以实现了 

//列表页的详情按钮逻辑 

const toDetail = (row: any) => {
  if (row.range_type !== 1)
    return ElMessage.warning("航程不是单程,请先查看数据结构进行修改");
  localStorage.setItem("scrollTop", window.scrollY.toString());
  router.push({
    name: "Detail",
    query: {
      id: row.id,
    },
  });
};

/**
 *   在路由 router.ts文件下 添加此代码
 */
// 这是自定义你要还原位置的组件页面和滚动位置
const scrollBehavior = (to: any, from: any, savedPosition: any) => {
  // 根据 to, from 等参数判断当前导航的来源和目标
  // 在需要更改 top 值的条件下执行修改
  if (to.name === "List") {
    // 根据实际情况修改 '列表页'
    let topY;
    if (localStorage.getItem("scrollTop")) {
      topY = +localStorage.getItem("scrollTop")!;
    } else {
      topY = 0;
    }

    return { left: 0, top: topY }; // 更改 top 值为 2000
  } else {
    return { left: 0, top: 0 }; // 其他情况下的滚动行为
  }
};
const router = createRouter({
  history: createWebHashHistory(),
  routes: constantRoutes,
  // 刷新时，滚动条位置还原
  scrollBehavior,
});