原理

如果使用了keep-alive组件，当前组件会额外增加两个生命周期。
activated：被 keep-alive 缓存的组件激活时调用
deactivated：被 keep-alive 缓存的组件失活时调用。
通过这两个声明周期，失活时记录页面原滚动位置，激活时滚回原位置。

hook

import { ref, onDeactivated, onActivated } from 'vue'/*** 页签切回回到原滚动位置方法*/
export function useScrollBack() {const scrollTop = ref(0);onDeactivated(() => {// 失活时保存滚动位置let scrollBar = document.getElementsByClassName("main-scrollbar") && document.getElementsByClassName("main-scrollbar").length > 0 ? document.getElementsByClassName("main-scrollbar")[0] : null;scrollTop.value = scrollBar?.scrollTop || window.pageYOffset || 0;// console.log("保存位置" + scrollTop.value)})onActivated(() => {// console.log("恢复位置" + scrollTop.value)// 激活时恢复滚动位置 let scrollBar = document.getElementsByClassName("main-scrollbar") && document.getElementsByClassName("main-scrollbar").length > 0 ? document.getElementsByClassName("main-scrollbar")[0] : window;scrollBar.scrollTo(0, scrollTop.value)})return { scrollTop }
}

使用

import { useScrollBack } from "@/hooks/scrollBack";
useScrollBack()