问题描述: 在路由a的时候,滚动页面到x的位置,此时直接跳转路由b,会发现b页面竟然页停留在x的位置!
解决方案①:监听路由
直接在app.vue监测路由变化, 让body的滚动距离scrollTop=0/ scrollTo(0,0)
export default {
watch: {
$route: function(to, from) {
window.scrollTo(0,0);
//document.body.scrollTop = 0;
//document.documentElement.scrollTop = 0;
},
},
};
解决方案②:全局路由守卫
全局后置路由守卫, 离开当前路由时执行
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
});
解决方案③:vue-router的滚动行为
注意 : 这个功能只在支持 history.pushState 的浏览器中可用。
**步骤 :在router实例中, 添加一个scrollBehavior
方法, 自定义路由切换时页面如何滚动
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 } // return的结果, 就是 期望滚动到哪个的位置
}
})
scrollBehavior方法解释
scrollBehavior 方法接收 to 和 from 路由对象。参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用, 记录滚动条的坐标。
如果返回一个 false的值,或者是一个空对象,那么不会发生滚动.
scrollBehavior(to,from,savePosition){ //点击浏览器的前进后退或切换导航触发
console.log(to); //要进入的目标路由对象 要去向哪里
console.log(from); //离开的路由对象 从哪里来
console.log(savePosition); //记录滚动条的坐标,点击前进后退的时候记录值
}