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 }
 
}
 
}

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章