当项目是下拉分页加载数据时，当离开页面再次回到当前页面时，数据会从第一页重新加载，这就会造成不好的体验。所以解决办法就是在离开当前页面时记录当前滚动的位置，然后再下次回到当前页面时，跳转到当前记录的位置。触底下拉加载可看下面这篇帖子：
el-scrollbar实现触底加载数据_el-scrollbar触底事件-CSDN博客
用el-scrollbar组件时，需要记录滚动的位置，需要用到scroll事件，然后通过scrollTop，因为
通过ref属性是拿不到滚动位置，所以需要通过scroll事件来记录每次滚动的位置。
<el-scrollbarv-if="state.list.length"ref="scroll"class="scrollBox"@scroll="handleScroll">
</el-scrollbar>// 记录当前滚动的位置
const handleScroll = (event: any) => {state.scrollPosition = event.scrollTop;
}
然后再离开页面时将当前滚动位置存到缓存中，但是如果有多个页面都需要记录的话，就需要区分存储的名字来进行区分，这里用到的是拼接当前路由的name属性，不会存在重复的问题。
值得注意的是：在vue页面中，一般离开页面时在事件onBeforeUnmount进行处理，但因为要拼接路由的name，在onBeforeUnmount生命周期中，拿到的name属性是跳转到新页面的name属性，而不是当前页面的，所以需要用到onBeforeRouteLeave，可以拿到当前页面的name属性来进行下一步操作。比如：
onBeforeRouteLeave(() => {if (scroll.value) {const name = route.name as string;sessionStorage.setItem(`scrollPosition-${name}`, state.scrollPosition + "");}
});然后再进入页面时获取当前页面存储的滚动位置。然后进行跳转。这就需要用到scrollTo属性。
if (scroll.value) {const name = route.name as string;const scrollPosition =sessionStorage.getItem(`scrollPosition-${name}`) || "0";scroll.value.scrollTo({ top: scrollPosition });
}但是会有一个衍生问题，如果加载了多页数据，也记录了当前滚动的位置，但当重新回到当前页面的时候，它只能跳到最底部，然后加载下一页的数据，并不能达到回到离开页面时记录的位置。所以这就需要下一步的操作，将数据和当前页数存储到store中，进入页面时，先从store中拉取数据和当前应该开始的页数，如果没有则拉取数据，否则就用store中存储的数据，就可以解决这一问题。
但当页面刷新时，store中的数据就会清空，但是当前页面存储的滚动位置还是在缓存中存在的，所以还会进行距离滚动。理想状态应该是页面刷新时，回到最顶部，这里解决方案就有很多，记录一下我的解决方法，用到的是监听浏览器刷新，然后刷新时，清空掉自己存储的滚动位置。
// 获取所有的缓存，然后遍历自己存储时的特殊开头，然后清空掉所有存储的滚动位置
const removeItemsWithPrefix = (prefix: any) => {// 遍历 sessionStorage 中所有的键for (let i = 0; i < sessionStorage.length; i++) {const key = sessionStorage.key(i) as any; // 获取当前的键if (key.startsWith(prefix)) {// 判断该键是否以指定的前缀开头sessionStorage.removeItem(key); // 移除该项}}
};
// "scrollPosition-" 这就是存储时所用的特殊标识
const handleBeforeUnload = () => {removeItemsWithPrefix("scrollPosition-");
};下面是监听页面刷新和卸载监听的事件。
onBeforeUnmount(() => {window.removeEventListener("beforeunload", handleBeforeUnload);
});
onMounted(async () => {window.addEventListener("beforeunload", handleBeforeUnload);
}
)
