摘要:調用全局的守衛。在被激活的組件里調用。用創建好的實例調用守衛中傳給的回調函數。
本文適用于對 Vue.js 和 vue-router 有一定程度了解的開發者正文
除特殊說明,vue-router 版本為 3.0.2
路由 class 匹配
class 的實際屬性值可以通過
默認情況下,當前路由的所有父級會默認添加 active-class ,即 當前處于/user/1 會給當前頁面的
示例: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 修改后保留原路由的重定向
文檔:重定向
嵌套命名視圖
在平級展示多個視圖時(單個視圖使用多個平級的
例如在 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 守衛 (vue-router@2.2+)。
在路由配置里調用 beforeEnter。
解析異步路由組件。
在被激活的組件里調用 beforeRouteEnter。
調用全局的 beforeResolve 守衛 (vue-router@2.5+)。
導航被確認。
調用全局的 afterEach 鉤子。
觸發 DOM 更新。
用創建好的實例調用 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
該函數可以用戶觸發添加路由到路由表中,可以嘗試在用戶權限控制中使用
文檔:router.addRoutes
建議簡單按鈕的路由跳轉邏輯不使用 v-on:click 事件,多使用
如果 SPA 放置路徑處于域名的子目錄中,不要按照一些網絡教程寫的去修改 webpack 配置,應該修改 Router 構建選項 中的 base 值,這樣能避免一些不必要的問題
不要嘗試改變組件內的 $route 的內容,這個屬性是只讀,里面的屬性是 immutable 狀態,但你可以 watch 這個
參考資料url 的正則表達式:path-to-regexp - 簡書
vue-router Document
vue-router Source Code
本文首發地址blog.shoyuf.top
第一次在 segmentfault 上發文章,歡迎各位評論區中吐槽指正
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101425.html
摘要:場景再現眾所周知,有三種模式,一般的前端項目中會選擇模式進行開發,最近做了一個運營活動就是基于的模式進行開發的。項目注冊了兩個路由抽象出來的入口頁面需要參數,所以提供瀏覽器里輸入回車后,頁面自動增加一個變為。 場景再現 眾所周知,vue-router有三種模式 :hash、html5、abstract , 一般的前端項目中會選擇hash模式進行開發,最近做了一個運營活動就是基于vue-...
摘要:在這個組件里面有一些鏈接列表,和,這些列表直接使用編寫按照傳統的寫法,如果我們需要往里面添加鏈接的時候,每次我們都得添加和標簽。所以修改如下這樣我們就把數據和視圖分開了,模板里面的代碼也簡潔了很多,不再需要寫很多重復的代碼。 Vue 的官方文檔 對 Vue 介紹非常詳細,但官方文檔使用在 HTML 中引入 vue 的方式進行講解,而實際項目中一般使用腳手架如 vue-cli 初始化項目...
閱讀 2255·2023-04-26 02:14
閱讀 2926·2021-09-30 09:46
閱讀 2101·2021-09-24 09:48
閱讀 952·2021-09-24 09:47
閱讀 3252·2019-08-30 15:44
閱讀 1879·2019-08-30 15:44
閱讀 3279·2019-08-30 14:18
閱讀 1949·2019-08-30 12:58