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

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

在做vue项目时,发现路由跳转之后,页面默认停留在当前浏览的位置,但是很多时候我们想要的是路由跳转之后,页面重新定位到顶部,下面我总结了比较常用的方法：

方法一：在router下的index.js配置：

scrollBehavior(to,from,savedPosition){

if (savedPosition){

return savedPosition // 按下 后退/前进 按钮时，类似浏览器的原生表现

}else {

return {x:0,y:0} // 让页面滚动到顶部

}

}

方法二：在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;

});

不足之处，多多包涵！如果有其他好的方法，欢迎留言！