Vue Router 记住页面滚动位置的简单实现
本质就是, 利用内置组件<keep-alive>在页面组件得以被缓存的基础上, 再加以document.documentElement.scrollTop获取滚动距离, 后返回页面时恢复滚动距离
实现效果, 打开A页面, 滚动至a处, 切换至B页面, 返回A页面, 此时页面位置为a点而非顶部。
路由出口
<div class="main">
<!-- 包裹`<keep-alive>` -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>页面组件
export default {
data(){
scrollTop: 0, // 储存滚动位置
},
activated() {
// 进入该组件后读取数据变量设置滚动位置
// 注意, 此处由页面是否具有 DTD (如: `<!DOCTYPE html>`), 决定具体选择, 详见参考资料
document.documentElement.scrollTop = this.scrollTop;
// document.body.scrollTop = this.scrollTop;
},
beforeRouteLeave(to, from, next) {
// 离开组件时保存滚动位置
// 注意, 此时需调用路由守卫`beforeRouterLeave`而非生命周期钩子`deactivated`
// 因为, 此时利用`deactivated`获取的 dom 信息已经是新页面得了
this.scrollTop = document.documentElement.scrollTop;
next();
},
}来源：https://www.cnblogs.com/classlate/archive/2021/11/02/15501987.html
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
