概述
问题描述：
单页面中页面跳转后，二级页面滚动条位置会跟上级页面一致。如首页列表页，进入详情如果详情内容可滚动，滚动条会同首页位置一致。原因vue路由跳转是通过对history.pushState()和history.replaceState()方法模拟来实现的，当调用router.go()或者 router.back()方法的时候就和history.hgo()、history.back()效果一样。但是，不加处理的情况下，组件的滚动行为会跟我们想象的不同
解决方案：
网上给出了很多解决方案，大多数是页面切换控制scroll位置。但是此处推荐vue官方给出的方案 scrollBehavior 方法，下边给出官方示例
注意: 这个功能只在支持 history.pushState 的浏览器中可用。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
return { x: 0, y: 0 }
}
})更多深入使用方法和场景在此不多赘述。
最后
以上就是愤怒秋天为你收集整理的Vue 单页面页面跳转滚动条记忆问题的全部内容，希望文章能够帮你解决Vue 单页面页面跳转滚动条记忆问题所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复