vue-cli單頁應用路由跳轉後scrollTop問題
阿新 • • 發佈:2019-02-11
VUE開發單頁應用時,頁面不會重新載入,預設返回的是頁面原先的滾動位置。如果要返回頂部,或者其他位置就需要一些配置了。
方式1
created或者mounted里加上 window.scrollTop(0,0);
方式2(官網提供方法)
使用前端路由,當切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新載入頁面那樣。 vue-router
能做到,而且更好,它讓你可以自定義路由切換時頁面如何滾動。
注意: 這個功能只在支援 history.pushState
的瀏覽器中可用。
當建立一個 Router 例項,你可以提供一個 scrollBehavior
方法:
const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滾動到哪個的位置 } })
scrollBehavior
方法接收 to
和 from
路由物件。第三個引數 savedPosition
當且僅當 popstate
導航 (通過瀏覽器的 前進/後退 按鈕觸發) 時才可用。
這個方法返回滾動位置的物件資訊,長這樣:
{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }}
(offset 只在 2.6.0+ 支援)
如果返回一個 falsy (譯者注:falsy 不是 false
,參考這裡)的值,或者是一個空物件,那麼不會發生滾動。
舉例:
scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }
對於所有路由導航,簡單地讓頁面滾動到頂部。
返回 savedPosition
,在按下 後退/前進 按鈕時,就會像瀏覽器的原生表現那樣:
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
如果你要模擬“滾動到錨點”的行為:
scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } }
我們還可以利用路由元資訊更細顆粒度地控制滾動。檢視完整例子請移步這裡。
#非同步滾動
2.8.0 新增
你也可以返回一個 Promise 來得出預期的位置描述:
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
將其掛載到從頁面級別的過渡元件的事件上,令其滾動行為和頁面過渡一起良好執行是可能的。但是考慮到用例的多樣性和複雜性,我們僅提供這個原始的介面,以支援不同使用者場景的具體實現。