vue-router 一些容易被忽略的知識點

本文適用於對 Vue.js 和 vue-router 有必定程度瞭解的開發者
除特殊說明，vue-router 版本爲 3.0.2

正文

• 路由 class 匹配

  <router-link> 路由匹配後會給該標籤添加 class 屬性值 .router-link-active，該功能在嵌套路由中十分方便

  class 的實際屬性值能夠經過 <router-link> 的 active-class 來控制，全局默認值則經過路由構造選項 linkActiveClass 來控制

  默認狀況下，當前路由的全部父級會默認添加 active-class ，即 當前處於/user/1 會給當前頁面的 <router-link to="/"> 添加 active-class ，若是不須要此項，給 <router-link> 添加 exact 便可，精準匹配的 class 經過 exact-active-class 控制

  示例：JSFiddle

• 通配符路由

  路由配置： {path: '/user-*'} ，訪問 /user-admin 路由，可在 $route.params.pathMatch 獲取到 'admin' (pathMatch 僅在 vue-router@3.0.2+ 可用，低於此版本使用 $route.params[0] 嘗試獲取)

  示例：JSFiddle

  文檔：捕獲全部路由或 404 Not found 路由

• 路由高級匹配模式

  vue-router 使用 path-to-regexp 做爲路由匹配引擎，該庫能夠經過輸入的路徑生成匹配規則的正則表達式，從而實現路由匹配功能。

  path-to-regexp 中經常使用的方法 pathToRegexp(path, keys, options) 第三個參數爲 pathToRegexpOptions 編譯正則的選項，在 vue-router@2.6.0+ 版本能夠經過配置 route 的 pathToRegexpOptions 參數添加高級配選項。

  參考例子，其可經過 '/optional-params/:foo?' 實現可選 param ，也可經過 '/params-with-regex/:id(\\d+)' 實現僅匹配數字 param（非命中路由向後匹配）。

  pathToRegexpOptions 的內容爲：

  • sensitive 大小寫敏感 (default: false)
  • strict 末尾斜槓是否精確匹配 (default: false)
  • end 全局匹配 (default: true)
  • start 從開始位置展開匹配 (default: true)
  • delimiter 指定其餘分隔符 (default: '/')
  • endsWith 指定標準的結束字符
  • whitelist 指定分隔符列表 (default: undefined, any character)

源碼：vue-router/src/create-route-map.js:154
文檔：高級匹配模式

• 編程式導航的鉤子處理

  在 vue-router@2.2.0+，可選的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回調做爲第二個和第三個參數。這些回調將會在導航成功完成 (在全部的異步鉤子被解析以後) 或終止 (導航到相同的路由、或在當前導航完成以前導航到另外一個不一樣的路由) 的時候進行相應的調用。
  該功能可用在少數埋點場景，而不用配置複雜的路由鉤子。

• 路由重定向

  給 route 配置 redirect 屬性可以使路由重定向到指定路由，該屬性支持 String/Object/Function 三種類型的值，其中 Function 的參數爲 to 對象

  給重定向的中間路由添加 beforeEach 和 beforeLeave 不會有效果，給 router 添加的鉤子也不能檢測到這次重定向，若是須要判斷重定向來源，可以使用路由對象 $route.redirectedFrom 判斷

  該功能適合路由 path 修改後保留原路由的重定向

  文檔：重定向

• 嵌套命名視圖

  在平級展現多個視圖時（單個視圖使用多個平級的<router-view>），能夠用到 <router-view> 的 name prop
  例如在 sidebar/list 的佈局頁面上，不用在父級視圖容器去書寫許多子組件的邏輯，只須要在路由配置中配置好相關頁面組件，從而進行組件關係解耦，也能高效控制子視圖渲染

  例子：JSFiddle

  文檔：嵌套命名視圖

• 路由別名

  給 route 配置 alias 屬性可使訪問者保持原有 url 卻訪問到指定路由中去。

  該屬性支持 String 和 Array 兩種類型，當 alias 與其餘路由重複時，以先申明的路由爲準，同時別名不會進行路由 class 匹配

  文檔：別名

• 路由組件傳參

  該功能旨在給組件與路由解除耦合關係，給 route 配置 props: true 同時組件內 props 配置與 prams 相同的變量，能夠直接經過訪問 props 而不用經過 $route.params 去訪問參數

  若是 props 是一個對象，對象內容會看成靜態內容傳入組件做爲 props

  當 props 爲一個函數，函數接收一個 route 參數，可使 query 做爲 props 傳入組件或實現更多高級功能

  文檔：路由組件傳參

• 完整的導航解析流程

  1. 導航被觸發。
  2. 在失活的組件裏調用離開守衛。
  3. 調用全局的 beforeEach 守衛。
  4. 在重用的組件裏調用 beforeRouteUpdate 守衛 (vue-router@2.2+)。
  5. 在路由配置裏調用 beforeEnter。
  6. 解析異步路由組件。
  7. 在被激活的組件裏調用 beforeRouteEnter。
  8. 調用全局的 beforeResolve 守衛 (vue-router@2.5+)。
  9. 導航被確認。
  10. 調用全局的 afterEach 鉤子。
  11. 觸發 DOM 更新。
  12. 用建立好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

文檔：完整的導航解析流程

• 滾動行爲

  建立 Router 實例，能夠提供一個 scrollBehavior 方法，該方法接收 to 、from 、savedPosition（該頁面原存在的xy值，僅在經過瀏覽器前進後退中可用）

  在該方法中返回 {selector:to.hash} 還可實現相似於「滾動到錨點」的行爲，vue-router@2.6.0+ 還可返回 {offset?:{x,y}} 進行位置偏移，注意該偏移負值爲向負方向偏移

  其 異步滾動 一般用於小衆的過渡組件（transition）和滾動行爲同時進行的狀況下，官方實例未給太多相關信息

  文檔：滾動行爲

• 組件懶加載-按組分塊

  SPA（single page application）因爲 All in JS 的特性，會使得首屏加載比較慢，不少人都推薦使用 Webpack 的 代碼分割功能減少單個 JS 體積，當全部頁面組件使用動態加載則會使頁面請求過多而得不償失，因此組件按組分塊則應運而生：

  const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
    const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
    const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

  該功能須要 webpack@2.4+ 支持

  文檔：把組件按組分塊

• 獲取路由匹配組件

  router.getMatchedComponents(location?)

  該函數能夠獲取傳入參數在路由表中匹配的路由對象數組，官方文檔中寫到一般在服務端渲染數據預加載的時候，也可用於在獲取當前路由對象數組的時候

  若是須要獲取當前路由記錄（就是路由構造選項 routes 配置數組中的對象副本，包含children 數組），可用 route.matched

  文檔：getMatchedComponents
  文檔：$route.matched

• 解析路由

  router.resolve(location, current?, append?)

  該函數可同時導出一個相似瀏覽器的 location 對象和一個根據匹配到的路由記錄 resolved ，若是沒有匹配到對應的對象，resolved 字段默認返回 404 組件或錯誤數據

  文檔：router.resolve

• 添加路由

  router.addRoutes(routes:Array<RouteConfig>)

  該函數能夠用戶觸發添加路由到路由表中，能夠嘗試在用戶權限控制中使用

  文檔：router.addRoutes

建議

• 簡單按鈕的路由跳轉邏輯不使用 v-on:click 事件，多使用 <router-link> 標籤。
• 若是 SPA 放置路徑處於域名的子目錄中，不要按照一些網絡教程寫的去修改 webpack 配置，應該修改 Router 構建選項 中的 base 值，這樣能避免一些沒必要要的問題
• 不要嘗試改變組件內的 $route 的內容，這個屬性是隻讀，裏面的屬性是 immutable 狀態，但你能夠 watch 這個

參考資料

1. url 的正則表達式：path-to-regexp - 簡書
2. vue-router Document
3. vue-router Source Code

本文首發地址

blog.shoyuf.top

第一次在 segmentfault 上發文章，歡迎各位評論區中吐槽指正