实现需求的大致情况>>>我的项目有列表页和详情页,在点击详情按钮跳转前需要本地缓存当前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,
});