VueRouter進階四(滾動行爲)

滾動行爲

使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像從新加載頁面那樣。 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
    }
  }
}

演示地址 : https://smallmotor.github.io/d

進階一(導航鉤子和路由元信息) : https://segmentfault.com/a/11...

進階二(過渡動效) : https://segmentfault.com/a/11...

進階三(數據獲取) : https://segmentfault.com/a/11...