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>
router
在路由中需加上 keepAlive: true
页面上
在需要的页面 .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;
});
},
注意:以上事件只能放到页面上面,不能放到页面上的部件里
参考
转载请保留原文链接: https://zodream.cn/blog/id/86.html