Vue-Router的滾動行為使用詳解

這次帶給大家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 }

• { selector: string }

## 如果傳回一個布林假的值，或是空對象，那麼就不會發生滾動。

範例：

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中文網其它相關文章！

推薦閱讀：

Three.js使用詳解

#Particles.js庫在vue裡如何使用

#

以上是Vue-Router的滾動行為使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！