Vuejs 動態路由文檔詳解踩坑經驗總結

文檔詳解

下面咱們從 Vue Router 官方文檔的內容開始講解

1. 響應路由參數的變化

   在實際開發中常常須要把某種模式匹配到的全部路由，全都映射到同個組件。例如，咱們有一個 User 組件，對於全部 ID 各不相同的用戶，都要使用這個組件來渲染。那麼，咱們能夠在 vue-router 的路由路徑中使用「動態路徑參數」(dynamic segment) 來達到這個效果：

如今呢，像 /user/foo 和 /user/bar 都將映射到相同的路由。

一個「路徑參數」使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，能夠在每一個組件內使用。因而，咱們能夠更新 User 的模板，輸出當前用戶的 ID：

除了 $route.params 外，$route 對象還提供了其它有用的信息，例如，$route.query (若是 URL 中有查詢參數)、$route.hash 等等。

2. 捕獲全部路由或 404 Not found 路由

   複用組件時，你能夠簡單地 watch (監測變化) $route 對象來監聽路由：

​ 若是想匹配任意路徑，咱們可使用通配符（*）

3. 高級匹配模式

vue-router 使用 path-to-regexp 做爲路徑匹配引擎，因此支持不少高級的匹配模式，例如：可選的動態路徑參數、匹配零個或多個、一個或多個，甚至是自定義正則匹配。

4. 匹配優先級

有時候，同一個路徑能夠匹配多個路由，此時，匹配的優先級就按照路由的定義順序：路由定義得越早，優先級就越高。

踩坑加擴展

1. Vue Router 動態路由匹配坑點

   ​ 使用 Vue 的小夥伴們應該都知道在 src 目錄下有一個 component 文件，咱們通常都會把可複用的組件丟到這個文件裏。在使用的時候經過 import 的形式將其引入，使用 props 的形式對複用組件進行傳遞參數。

​ 可是有的時候，可能須要整個頁面進行復用（或者子頁面），這個時候 hash 值通常也會跟着變更。這個時候再去使用上面那種 方式就有點不合適了，因此咱們能夠採用動態路由的形式來完成這種需求。一樣的也是經過新建一個公共Vue組件，而後使用 component 進行引入。

​ 而後咱們在其餘頁面中使用編程式的導航，例如 router.push('/dynamic/one') 便可跳轉到對應的複用頁面中去。在這裏也有一個小知識點，咱們在 push('/dynamic/one') 的時候是能夠拿到穿過來的動態 hash 值的，而且參數也會被存儲到 this.$route.params 中的。

​ 小驚喜

​ 做爲一個比較流行的框架，確定在一些細節上處理的比較完善。在對於這種直接拿來複用的頁面，也考慮到進一步的性能優化的。因此，當使用路由參數時，例如從 /dynamic/one 導航到 /dynamic/two，原來的組件實例是會被複用的。由於兩個路由都渲染了同個組件，比起銷燬再建立，複用則顯得更加高效。不過這也意味着，組件的生命週期鉤子函數就不會再被調用。

​ 這個時候 踩坑點 就來了，首先在官方文檔中是這麼寫的。「複用組件時，想對路由參數的變化做出響應的話，你能夠簡單地watch(監測變化) $route 對象」，這個時候你們都會想着，是否是隻要咱們進行路由的切換，在 from 組件中使用 watch 就能夠監聽到頁面發生的變化。可是其實咱們誤會了，這裏是有一個要求的，必須是子路由進行跳轉，才能被監聽到。因此咱們去 push 到其餘的頁面，修改了根 hash 是沒法被監聽到的。

​ 在動態路由匹配這一章其實還有不少的知識點沒講，也有不少坑做者本人也沒去填。好比經常使用的 { path: '*' } 一般用於捕獲 客戶端 404 錯誤。

2. 滾動行爲

   ​ 有的時候，業務需求須要咱們當頁面進行跳轉的時候，須要默認定位到某個位置去。其實 Vue Router 已經替咱們解決了這個功能。他就是 scrollBehavior 鉤子函數。稍微注意一下：這個功能只在支持 history.pushState 的瀏覽器中可用。

​ scrollBehavior 方法接受 to 和 from 路由對象。第三個參數 savedPosition 當且僅當 popstate 導航（經過瀏覽器的 前進/後退 按鈕觸發）時纔可用。

如上圖所示，其實還有其餘的方式寫法：

• { x: number, y:number }

• { selector: string, offset? : { x: number, y: number }}

​ 一樣的，有時候咱們想切換路由後過個幾秒鐘，而後再滾動到指定位置。scrollBehavior 也是支持異步滾動的。寫法以下所示：

不少人由於 Vue 是比較容易上手的框架，每每卻輕視了它，沒有認真的去閱讀它的官方文檔，其實它也有不少的奇淫巧技能夠幫助咱們解決業務上的需求，有時候一個小功能就能夠解決大需求。不知道這篇文章有沒有對你給予到幫助，若是有幫助記得點下關注哦。

​

PS:你們看了後以爲對本身有幫助能夠三連留言,歡迎提出寶貴意見，也歡迎各位對相關技術有興趣的開發者（由團隊開發人員微信號x118422邀請）入羣，在線解答討論數據可視化、優化圖表性能等方面的技術問題~