Vue Scroller返回页面记住滚动位置的实例代码
本文主要介绍了 Vue Scroller 返回页面记住滚动位置的实例代码，通过设置 keepAlive 缓存、渲染页面和记录滚动位置三部分来实现滚动位置的记忆。
一、设置 keepAlive 缓存
在 Vue Router 中，我们可以通过设置路由的 meta 属性 keepAlive 来实现页面缓存。例如，在路由配置文件中：
```
router: {
path: '/actlist',
name: 'actlist',
component: actlist,
meta: {
keepAlive: true
}
}
```
这样，在访问 actlist 路由时，页面将被缓存，下次访问时将直接显示缓存的页面，而不需要重新渲染。
二、设置渲染页面
在 App.vue 文件中，我们可以使用 keep-alive 组件来包围 router-view 组件，以实现页面缓存。例如：
```
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
```
这样，当路由的 meta 属性 keepAlive 为 true 时，页面将被缓存，否则将重新渲染。
三、记录滚动位置并赋值
在 beforeRouteEnter 和 beforeRouteLeave 事件中，我们可以记录滚动位置并赋值。例如：
```
beforeRouteEnter(to, from, next) {
if (!sessionStorage.askPositon || from.path == '/') {
// 当前页面刷新不需要切换位置
sessionStorage.askPositon = '';
next();
} else {
next(vm => {
if (vm && vm.$refs.my_scroller) {
// 通过 vm 实例访问
setTimeout(function() {
vm.$refs.my_scroller.scrollTo(0, sessionStorage.askPositon, true);
}, 0);
// 同步转异步操作
}
});
}
},
beforeRouteLeave(to, from, next) {
// 记录离开时的位置
sessionStorage.askPositon = this.$refs.my_scroller && this.$refs.my_scroller.getPosition() && this.$refs.my_scroller.getPosition().top;
next();
}
```
这样，在离开页面时，我们可以记录当前滚动位置，并在下次访问时恢复到之前的滚动位置。
本文介绍了 Vue Scroller 返回页面记住滚动位置的实例代码，通过设置 keepAlive 缓存、渲染页面和记录滚动位置三部分来实现滚动位置的记忆。希望对大家有所帮助，如果大家有任何疑问，请随时留言。
