vue 返回上一页回到原先滚动位置
在一些页面，比如滚动加载的页面默认无法后退保存之前的滚动位置。但需要这个功能该怎么做？
App.vue
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>1234
router
在路由中需加上 keepAlive: true
{
name: 'search',
path: '/search',
component: Search,
meta: {
keepAlive: true, // 需要缓存
},
}, 12345678
页面上
在需要的页面 .vue 里加上事件，mounted 事件只在新进入时触发，或离开页面后缓存页面时触发（这时是获取不到任何页面元素的）
data() {
return {
scrollTop: 0,
};
},
beforeRouteLeave (to, from, next) {
// this.scrollTop = document.querySelector('.scroll-box').scrollTop; // div内部滚动的
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
next();
},
beforeRouteEnter(to, from, next) {
next(vm => {
// document.querySelector('.scroll-box').scrollTop = vm.scrollTop;// div内部滚动的
document.body.scrollTop = vm.scrollTop;
});
},12345678910111213141516
注意：以上事件只能放到页面上面，不能放到页面上的部件里
参考
转载请保留原文链接： https://zodream.cn/blog/id/86.html