1、背景
在做的这个项目中,发现vue在路由跳转之后,页面默认会停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面就是一些办法来解决这个问题。
2、方法
2.1 在router下的index.js配置
scrollBehavior(to,from,savedPosition){
if (savedPosition){
return savedPosition // 按下 后退/前进 按钮时,类似浏览器的原生表现
}else {
return {x:0,y:0} // 让页面滚动到顶部
}
}
2.2 在main.js入口文件写入
router.afterEach((to,from,next) => {
window.scrollTo(0,0);
// 或
// window.scroll(0, 0);
});
或
router.afterEach((to,from,next) => {
document.body.scrollTop =0;
document.documentElement.scrollTop = 0;
});