Vue Router高階之滾動行為詳解

2022-10-07 08:03:06 字數 724 閱讀 2310

滾動行為

使用前端路由,當切換到新ktortnab路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新載入頁面那樣。 vue-router 能做到,而且更好,它讓你可以自定義路由切換時頁面如何滾動。

注意:這個功能只在 html5 histo 模式下可用。

當建立乙個 router 例項,你可以提供乙個 scrollbeh**ior 方法:

var router = new vuerouter(

})scrollbeh**ior 方法接收 to 和 from 路由物件。第三個引數 s**edposition 當且僅當 popstate 導航 (通過瀏覽器的 前進/後退 按鈕觸發) 時才可用。

這個方法返回滾動位置的物件資訊,長這樣:

如果返回乙個布林假的值,或者是乙個空物件,那麼不會發生滾動。

舉例:scrollbeh**ior (to, from, s**edposition)

}對於所有路由導航,簡單地讓頁面滾動到頂部。

返回 s**edpositio在按下 後退/前進 按鈕時,就會像瀏覽器的原生表現那樣:

scrollbeh**ior (to, from, s**edposition) else

}}如果你要模擬『滾動到錨點』的行為:

scrollbeh**ior (to, from, s**edposition)

}}本文標題: vue-router高階之滾動行為詳解

本文位址:

vue router高階筆記

開發過程中只使用過vue router的導航守衛做許可權,路由元資訊做導航啟用,其他知識點沒有接觸過,寫個筆記加深理解。1 導航守衛 可以用router.beforeeach註冊乙個全域性前置守衛,可以根據需求,根據許可權攔截頁面跳轉,或跳轉會指定頁面,比如登入頁面。router.beforeeac...

Vue Router 高階 路由守衛

1.全域性前置守衛 router.beforeach to,from next 用法跟全域性一樣,只是,將其寫進其中乙個路由物件中,只在這個路由下起作用。beforeenter 守衛只在進入路由的是時候才會觸發,不會在params,query 或 hash改變時觸發 3.全域性解析守衛 router...

Vue Router 04 路由高階之導航守衛

宣告 其實路由守衛官方文件很容易就能看明白的,比較重要的也包括完整的導航解析流程 在另乙個欄目開啟vue的正確姿勢裡,我碼了乙個loading外掛程式 注意,但是寫的install方法才啟動,你如果在這裡要使用的化,最好再新增個匯出的方法 或者可以直接用網路上的一些動畫外掛程式,如 nprogres...