vue-router 筆記整理

• 組件內使用路由

  watch能夠監聽，或者beforeRouteUpdate 鉤子函數監聽。用途？
  用途：若是目的地和當前路由相同，只有參數發生了改變 (好比從一個用戶資料到另外一個
  /users/1 -> /users/2)，你須要使用 beforeRouteUpdate 來響應這個變化 (好比抓取
  用戶信息)。

• 路由的三大模式

  路由模式（history、
  hash 和 abstract）路由的push等同window.history.pushState(一個狀態對象,
  title, url)

• 路由組件傳參

  使用props 將組件和路由解耦

• 路由守衛（鉤子函數

  全局的,單個路由獨享的, 組件級的
  全局：router.beforeEach（to, from, next）異步解析 狀態有「等待中」，「肯定的」
  router.afterEach（to, from）
  路由獨享鉤子：beforeEnter（to, from, next） 用法同全局的
  router.beforeEach（）
  組件級：

  beforeRouteEnter（to，from， next）
  // 在渲染該組件的對應路由被 confirm 前調用
  // 不！能！獲取組件實例 this
  // 由於當守衛執行前，組件實例還沒被建立
  
  beforeRouteUpdate（to，from， next）
      // 在當前路由改變，可是該組件被複用時調用
     // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之
     間
     //跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下
    被調用。
    // 能夠訪問組件實例 `this`
  
     beforeRouteLeave（to，from， next ）
     // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`

  beforeRouteLeave 這個鉤子函數頗有用，顧名思義，導航離開該組件對應的路由調用，能夠作一些
  離開時候的comfirm判斷，好比有重要的信息須要用戶保存後才能進行跳轉、存儲session、清除定
  時器等。

• 路由元信息：
  能夠配置 meta 字段，一般用來作是否須要登陸的判斷
  meta: { requiresAuth: true }
• 路由的過渡：
  設置不一樣的 name 好比name=fade
• 數據獲取：（比較陌生，後續着重看）
  導航完成以後獲取：先完成導航，而後在接下來的組件生命週期鉤子中獲取數據。在數據獲取期間顯示『加載中』之類的指示。
  導航完成以前獲取：導航完成前，在路由進入的守衛中獲取數據，在數據獲取成功後執行導航。

• 滾動行爲
  這個功能只在支持 history.pushState 的瀏覽器中可用

const router = new VueRouter({ routes: [...], scrollBehavior (to, from, savedPosition) { // return 指望滾動到哪一個的位置 } })

• 路由懶加載
  結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕鬆實現路由組件的懶加載

  參考文獻

• vue-router 中文官方文檔