问题描述:
列表页进入详情页，或者tab页切换，然后再返回列表页，希望能切换到之前滚动位置
解决问题思路:
切换到其他页面前记录位置，返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子去实现.
还有一种更简单粗暴的方法， vue-scroller.min.js源码中添加宽高不为零判断，实现方式见评论，是最近代码优化的时候发现的。
代码部分:
beforeRouteEnter(to,from,next){
if(!sessionStorage.askPositon || from.path == '/')
在Vue.js应用中，特别是在构建具有多个视图和滚动区域的单页面应用程序（SPA）时，保持用户滚动位置的一致性是一项重要的用户体验优化。`vue-scroller`是一个用于实现滚动功能的Vue组件，它提供了类似iscroll的功能，包括弹性滚动、上拉加载更多等。在本文中，我们将探讨如何利用`vue-scroller`和Vue Router来记录并恢复滚动位置，以及一些关键的代码示例。
我们需要理解Vue Router的两个生命周期钩子函数：`beforeRouteEnter`和`beforeRouteLeave`。这些钩子在导航发生时触发，帮助我们在页面之间进行状态管理。
1. `beforeRouteEnter(to, from, next)`: 这个钩子在导航确认后调用，但在组件实例被创建之前。因此，我们不能在这个钩子中访问`this`，因为组件实例尚未创建。我们可以传递一个回调给`next`，当组件实例创建后，这个回调会被调用。
2. `beforeRouteLeave(to, from, next)`: 这个钩子在导航离开当前路由之前调用，可以用来执行清理任务，例如记录滚动位置。
在示例代码中，`beforeRouteEnter`用于在进入列表页时恢复滚动位置：
```javascript
beforeRouteEnter(to, from, next) {
if (!sessionStorage.askPositon || from.path == '/') {
// 当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
next();
} else {
next(vm => {
if (vm && vm.$refs.scrollerBottom) {
// 通过vm实例访问this
setTimeout(function () {
vm.$refs.scrollerBottom.scrollTo(0, sessionStorage.askPositon, false);
}, 0);
// 同步转异步操作
}
});
}
},
```
这里，我们检查`sessionStorage.askPositon`是否有值，如果没有或者从根路径(`'/'`)进入，则不进行滚动位置恢复。否则，我们等待组件实例创建后，通过`vm.$refs.scrollerBottom`访问`vue-scroller`实例，并调用`scrollTo`方法恢复滚动位置。`setTimeout`用于将同步操作转化为异步，确保在DOM渲染完成后再执行滚动。
`beforeRouteLeave`钩子则用于在离开列表页时保存滚动位置：
```javascript
beforeRouteLeave(to, from, next) {
// 记录离开时的位置
sessionStorage.askPositon = this.$refs.scrollerBottom &&
this.$refs.scrollerBottom.getPosition() &&
this.$refs.scrollerBottom.getPosition().top;
next();
},
```
在此处，我们获取`vue-scroller`实例的当前位置，并将其存储在`sessionStorage`中。`getPosition()`方法返回滚动位置，`top`属性表示垂直滚动位置。
需要注意的是：
1. 熟悉`vue-router`的API，包括导航守卫和组件生命周期。
2. 对于`vue-scroller`，需要理解其提供的方法，如`scrollTo`和`getPosition`，以及如何通过`$refs`访问组件实例。
3. 在`beforeRouteEnter`中，不能直接使用`this`，需要通过回调函数传入的参数`vm`来访问组件实例。
4. 使用`setTimeout`将同步操作转换为异步，以确保在DOM更新后执行滚动操作。
在实际项目中，这种记录和恢复滚动位置的策略可以提高用户体验，使用户在切换页面后返回时仍能找到他们离开时的位置。同时，利用`sessionStorage`来存储滚动位置是一种常见的跨页面状态管理方式，但需注意不要存储过多数据，以免影响性能。
