本文適用於對 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 僅在[email protected]+
可用,低於此版本使用$route.params[0]
嘗試獲取)示例:JSFiddle
-
路由高級匹配模式
vue-router 使用 path-to-regexp 作爲路由匹配引擎,該庫可以通過輸入的路徑生成匹配規則的正則表達式,從而實現路由匹配功能。
path-to-regexp
中常用的方法pathToRegexp(path, keys, options)
第三個參數爲pathToRegexpOptions
編譯正則的選項,在[email protected]+
版本可以通過配置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
文檔:高級匹配模式
-
編程式導航的鉤子處理
在
[email protected]+
,可選的在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
傳入組件或實現更多高級功能文檔:路由組件傳參
-
完整的導航解析流程
- 導航被觸發。
- 在失活的組件裏調用離開守衛。
- 調用全局的 beforeEach 守衛。
- 在重用的組件裏調用 beforeRouteUpdate 守衛 ([email protected]+)。
- 在路由配置裏調用 beforeEnter。
- 解析異步路由組件。
- 在被激活的組件裏調用 beforeRouteEnter。
- 調用全局的 beforeResolve 守衛 ([email protected]+)。
- 導航被確認。
- 調用全局的 afterEach 鉤子。
- 觸發 DOM 更新。
- 用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。
文檔:完整的導航解析流程
-
滾動行爲
創建 Router 實例,可以提供一個
scrollBehavior
方法,該方法接收to
、from
、savedPosition
(該頁面原存在的xy值,僅在通過瀏覽器前進後退中可用)在該方法中返回
{selector:to.hash}
還可實現類似於“滾動到錨點”的行爲,[email protected]+
還可返回{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')
該功能需要
[email protected]+
支持文檔:把組件按組分塊
-
獲取路由匹配組件
router.getMatchedComponents(location?)
該函數可以獲取傳入參數在路由表中匹配的路由對象數組,官方文檔中寫到通常在服務端渲染數據預加載的時候,也可用於在獲取當前路由對象數組的時候
如果需要獲取當前路由記錄(就是路由構造選項 routes 配置數組中的對象副本,包含children 數組),可用
route.matched
-
解析路由
router.resolve(location, current?, append?)
該函數可同時導出一個類似瀏覽器的
location
對象和一個根據匹配到的路由記錄resolved
,如果沒有匹配到對應的對象,resolved
字段默認返回 404 組件或錯誤數據 -
添加路由
router.addRoutes(routes:Array<RouteConfig>)
該函數可以用戶觸發添加路由到路由表中,可以嘗試在用戶權限控制中使用
建議
- 簡單按鈕的路由跳轉邏輯不使用
v-on:click
事件,多使用<router-link>
標籤。 - 如果 SPA 放置路徑處於域名的子目錄中,不要按照一些網絡教程寫的去修改 webpack 配置,應該修改
Router 構建選項
中的base
值,這樣能避免一些不必要的問題 - 不要嘗試改變組件內的
$route
的內容,這個屬性是隻讀,裏面的屬性是immutable
狀態,但你可以watch
這個
參考資料
本文首發地址
第一次在 segmentfault 上發文章,歡迎各位評論區中吐槽指正