這次帶給大家Vue-Router的滾動行為使用詳解,Vue-Router滾動行為使用的注意事項有哪些,以下是實戰案例,一起來看一下。
捲動行為
使用前端路由,當切換到新路由時,想要頁面滾到頂部,或者是保持原先的滾動位置,就像重新載入頁面一樣。 vue-router 能做到,而且更好,它讓你可以自定義路由切換時頁面如何滾動。
注意: 這個功能只在 HTML5 history 模式下可用。
當建立一個 Router 實例,你可以提供一個 scrollBehavior 方法:
var router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 } })
scrollBehavior 方法接收 to 和 from 路由物件。第三個參數 savedPosition 當且僅當 popstate 導航 (透過瀏覽器的 前進/後退 按鈕觸發) 時才可用。
這個方法傳回滾動位置的物件訊息,長這樣:
# { x: number, y: number }
範例:
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 } } }相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀: #
以上是Vue-Router的滾動行為使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!