Vue路由跳转时定位到页面顶部的方法

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;

});