vue路由跳转时进入新的页面，滚动条的位置停留在上个页面的位置，没有回到顶部

1.问题

vue路由跳转时进入新的页面，滚动条的位置停留在上个页面的位置，没有回到顶部

2.解决方法

a.在main.js 中添加如下代码

router.beforeEach((to, from, next) => {
 
// chrome
 
document.body.scrollTop = 0
 
// firefox
 
document.documentElement.scrollTop = 0
 
// safari
 
window.pageYOffset = 0
 
next()
 
})

b.或者在router下的index.js添加代码如下

const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
return { x: 0, y: 0 }
}
})

或者

scrollBehavior (to, from, savedPosition) {
 
if (savedPosition) {
 
return savedPosition
 
} else {
 
return { x: 0, y: 0 }
 
}
 
}