摘要：調(diào)用全局的守衛(wèi)。在被激活的組件里調(diào)用。用創(chuàng)建好的實(shí)例調(diào)用守衛(wèi)中傳給的回調(diào)函數(shù)。

本文適用于對(duì) Vue.js 和 vue-router 有一定程度了解的開(kāi)發(fā)者
除特殊說(shuō)明，vue-router 版本為 3.0.2

路由 class 匹配

路由匹配后會(huì)給該標(biāo)簽添加 class 屬性值 .router-link-active，該功能在嵌套路由中十分方便

class 的實(shí)際屬性值可以通過(guò) 的 active-class 來(lái)控制，全局默認(rèn)值則通過(guò)路由構(gòu)造選項(xiàng) linkActiveClass 來(lái)控制

默認(rèn)情況下，當(dāng)前路由的所有父級(jí)會(huì)默認(rèn)添加 active-class ，即 當(dāng)前處于/user/1 會(huì)給當(dāng)前頁(yè)面的 添加 active-class ，如果不需要此項(xiàng)，給 添加 exact 即可，精準(zhǔn)匹配的 class 通過(guò) exact-active-class 控制

示例：JSFiddle

通配符路由

路由配置： {path: "/user-*"} ，訪問(wèn) /user-admin 路由，可在 $route.params.pathMatch 獲取到 "admin" (pathMatch 僅在 [email protected]+ 可用，低于此版本使用 $route.params[0] 嘗試獲取)

示例：JSFiddle

文檔：捕獲所有路由或 404 Not found 路由

路由高級(jí)匹配模式

vue-router 使用 path-to-regexp 作為路由匹配引擎，該庫(kù)可以通過(guò)輸入的路徑生成匹配規(guī)則的正則表達(dá)式，從而實(shí)現(xiàn)路由匹配功能。

path-to-regexp 中常用的方法 pathToRegexp(path, keys, options) 第三個(gè)參數(shù)為 pathToRegexpOptions 編譯正則的選項(xiàng)，在 [email protected]+ 版本可以通過(guò)配置 route 的 pathToRegexpOptions 參數(shù)添加高級(jí)配選項(xiàng)。

參考例子，其可通過(guò) "/optional-params/:foo?" 實(shí)現(xiàn)可選 param ，也可通過(guò) "/params-with-regex/:id(d+)" 實(shí)現(xiàn)僅匹配數(shù)字 param（非命中路由向后匹配）。

pathToRegexpOptions 的內(nèi)容為：

sensitive 大小寫(xiě)敏感 (default: false)

strict 末尾斜杠是否精確匹配 (default: false)

end 全局匹配 (default: true)

start 從開(kāi)始位置展開(kāi)匹配 (default: true)

delimiter 指定其他分隔符 (default: "/")

endsWith 指定標(biāo)準(zhǔn)的結(jié)束字符

whitelist 指定分隔符列表 (default: undefined, any character)

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

編程式導(dǎo)航的鉤子處理

在 [email protected]+，可選的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回調(diào)作為第二個(gè)和第三個(gè)參數(shù)。這些回調(diào)將會(huì)在導(dǎo)航成功完成 (在所有的異步鉤子被解析之后) 或終止 (導(dǎo)航到相同的路由、或在當(dāng)前導(dǎo)航完成之前導(dǎo)航到另一個(gè)不同的路由) 的時(shí)候進(jìn)行相應(yīng)的調(diào)用。
該功能可用在少數(shù)埋點(diǎn)場(chǎng)景，而不用配置復(fù)雜的路由鉤子。

路由重定向

給 route 配置 redirect 屬性可使路由重定向到指定路由，該屬性支持 String/Object/Function 三種類(lèi)型的值，其中 Function 的參數(shù)為 to 對(duì)象

給重定向的中間路由添加 beforeEach 和 beforeLeave 不會(huì)有效果，給 router 添加的鉤子也不能檢測(cè)到此次重定向，如果需要判斷重定向來(lái)源，可使用路由對(duì)象 $route.redirectedFrom 判斷

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

文檔：重定向

嵌套命名視圖

在平級(jí)展示多個(gè)視圖時(shí)（單個(gè)視圖使用多個(gè)平級(jí)的），可以用到 的 name prop
例如在 sidebar/list 的布局頁(yè)面上，不用在父級(jí)視圖容器去書(shū)寫(xiě)許多子組件的邏輯，只需要在路由配置中配置好相關(guān)頁(yè)面組件，從而進(jìn)行組件關(guān)系解耦，也能高效控制子視圖渲染

例子：JSFiddle

文檔：嵌套命名視圖

路由別名

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

該屬性支持 String 和 Array 兩種類(lèi)型，當(dāng) alias 與其他路由重復(fù)時(shí)，以先申明的路由為準(zhǔn)，同時(shí)別名不會(huì)進(jìn)行路由 class 匹配

文檔：別名

路由組件傳參

該功能旨在給組件與路由解除耦合關(guān)系，給 route 配置 props: true 同時(shí)組件內(nèi) props 配置與 prams 相同的變量，可以直接通過(guò)訪問(wèn) props 而不用通過(guò) $route.params 去訪問(wèn)參數(shù)

如果 props 是一個(gè)對(duì)象，對(duì)象內(nèi)容會(huì)當(dāng)作靜態(tài)內(nèi)容傳入組件作為 props

當(dāng) props 為一個(gè)函數(shù)，函數(shù)接收一個(gè) route 參數(shù)，可以使 query 作為 props 傳入組件或?qū)崿F(xiàn)更多高級(jí)功能

文檔：路由組件傳參

完整的導(dǎo)航解析流程

導(dǎo)航被觸發(fā)。

在失活的組件里調(diào)用離開(kāi)守衛(wèi)。

調(diào)用全局的 beforeEach 守衛(wèi)。

在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) ([email protected]+)。

在路由配置里調(diào)用 beforeEnter。

解析異步路由組件。

在被激活的組件里調(diào)用 beforeRouteEnter。

調(diào)用全局的 beforeResolve 守衛(wèi) ([email protected]+)。

導(dǎo)航被確認(rèn)。

調(diào)用全局的 afterEach 鉤子。

觸發(fā) DOM 更新。

用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

文檔：完整的導(dǎo)航解析流程

滾動(dòng)行為

創(chuàng)建 Router 實(shí)例，可以提供一個(gè) scrollBehavior 方法，該方法接收 to 、from 、savedPosition（該頁(yè)面原存在的xy值，僅在通過(guò)瀏覽器前進(jìn)后退中可用）

在該方法中返回 {selector:to.hash} 還可實(shí)現(xiàn)類(lèi)似于“滾動(dòng)到錨點(diǎn)”的行為，[email protected]+ 還可返回 {offset?:{x,y}} 進(jìn)行位置偏移，注意該偏移負(fù)值為向負(fù)方向偏移

其 異步滾動(dòng) 通常用于小眾的過(guò)渡組件（transition）和滾動(dòng)行為同時(shí)進(jìn)行的情況下，官方實(shí)例未給太多相關(guān)信息

文檔：滾動(dòng)行為

組件懶加載-按組分塊

SPA（single page application）由于 All in JS 的特性，會(huì)使得首屏加載比較慢，很多人都推薦使用 Webpack 的 代碼分割功能減小單個(gè) JS 體積，當(dāng)所有頁(yè)面組件使用動(dòng)態(tài)加載則會(huì)使頁(yè)面請(qǐng)求過(guò)多而得不償失，所以組件按組分塊則應(yīng)運(yùn)而生：

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

該功能需要 [email protected]+ 支持

文檔：把組件按組分塊

獲取路由匹配組件

router.getMatchedComponents(location?)

該函數(shù)可以獲取傳入?yún)?shù)在路由表中匹配的路由對(duì)象數(shù)組，官方文檔中寫(xiě)到通常在服務(wù)端渲染數(shù)據(jù)預(yù)加載的時(shí)候，也可用于在獲取當(dāng)前路由對(duì)象數(shù)組的時(shí)候

如果需要獲取當(dāng)前路由記錄（就是路由構(gòu)造選項(xiàng) routes 配置數(shù)組中的對(duì)象副本，包含children 數(shù)組），可用 route.matched

文檔：getMatchedComponents
文檔：$route.matched

解析路由

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

該函數(shù)可同時(shí)導(dǎo)出一個(gè)類(lèi)似瀏覽器的 location 對(duì)象和一個(gè)根據(jù)匹配到的路由記錄 resolved ，如果沒(méi)有匹配到對(duì)應(yīng)的對(duì)象，resolved 字段默認(rèn)返回 404 組件或錯(cuò)誤數(shù)據(jù)

文檔：router.resolve

添加路由

router.addRoutes(routes:Array)

該函數(shù)可以用戶觸發(fā)添加路由到路由表中，可以嘗試在用戶權(quán)限控制中使用

文檔：router.addRoutes

簡(jiǎn)單按鈕的路由跳轉(zhuǎn)邏輯不使用 v-on:click 事件，多使用 標(biāo)簽。

如果 SPA 放置路徑處于域名的子目錄中，不要按照一些網(wǎng)絡(luò)教程寫(xiě)的去修改 webpack 配置，應(yīng)該修改 Router 構(gòu)建選項(xiàng) 中的 base 值，這樣能避免一些不必要的問(wèn)題

不要嘗試改變組件內(nèi)的 $route 的內(nèi)容，這個(gè)屬性是只讀，里面的屬性是 immutable 狀態(tài)，但你可以 watch 這個(gè)

url 的正則表達(dá)式：path-to-regexp - 簡(jiǎn)書(shū)

vue-router Document

vue-router Source Code

blog.shoyuf.top

第一次在 segmentfault 上發(fā)文章，歡迎各位評(píng)論區(qū)中吐槽指正