關注若川視野，回復"pdf" 領取資料，回復"加群"，可加群長期交流學習

12月8日，Vue Router 4 正式發布穩定版本。

在經歷了 14 個 Alpha，13 個 Beta 和 6 個 RC 版本之后，Vue Router v4 閃亮登場，為你帶來了 TypeScript 集成、新功能以及對現代應用程序的一致性改進，已經準備好成為 Vue3 新應用的最佳伴侶。

將近 2 年的時間，大約 1500 次提交，15 個RFC^[1]，無數的心血……以及許多用戶的幫助以及他們的錯誤報告和功能請求。?謝謝大家的幫助！

項目結構優化

Vue Router 現在分為三個模塊：

• History 實現：?處理地址欄，并且特定于 Vue Router 運行的環境（節點，瀏覽器，移動設備等）

• Router 匹配器：處理類似?/users/:id?的路由解析和優先級處理。

• Router: 將一切連接在一起，并處理路由特定功能，例如導航守衛。

動態路由

動態路由^[2]是 Vue Router 最受歡迎的功能之一。?它讓路由變得更靈活，更強大，讓曾經不可能的功能成為了現實！Vue Router4 新增了有自動優先級排名的高級路徑解析功能，用戶新現在可以以隨意的順序定義路由，因為 Router 會根據 URL 字符串表示來猜測應該匹配的路由。

優先級排名，其實就是根據你路徑書寫的規則計算出一個得分，根據得分來優先選用最有可能的那一項。

舉個例子來說，你同時寫了?/users?和?/:w+?這兩個路由：

const?routes?=?[{path:?'/users',Component:?Users},{path:?'/:w+',Component:?NotFound}
]

那么你當然希望在輸入?/users?這個更精確的路徑的時候，走上面的規則，而下面則作為兜底規則。在舊版的 Vue Router 中需要通過路由聲明的順序來保證這個行為，而新版則無論你怎樣放置，都會按照得分系統來計算該匹配哪個路由。

甚至專門有?Path Ranker^[3]?這個網頁來幫助你計算路由的優先級得分。

在測試用例中，ssh 找到了一個更具體的優先級得分排名，可以先感受一下：

it('works',?()?=>?{checkPathOrder(['/a/b/c','/a/b','/a/:b/c','/a/:b','/a','/a-:b-:c','/a-:b','/a-:w(.*)','/:a-:b-:c','/:a-:b','/:a-:b(.*)','/:a/-:b','/:a/:b','/:w','/:w+'])
})

簡單來說，越明確的路由排名越高，越模糊則反之，無關順序，非常有意思。

改進后的導航系統

新的導航系統更加具有一致性，它改善了滾動行為的體驗，使其更加接近原生瀏覽器的行為。?它還為用戶提供了有關導航狀態的幾乎更多信息，用戶可以用這些信息，通過?ProgressBar和?Modal之類的全局 UI 元素讓用戶的體驗變得更好。

更強大的 Devtools

多虧了新的Vue Devtools^[4]，Vue Router 能夠和瀏覽器進行以下更高級的整合。

1. 時間軸記錄路由變化：

1. 完整 route 目錄，能夠幫助你輕松進行調試：

更好的路由守衛

和next說拜拜，現在確認跳轉不需要再手動執行這個函數了，而是根據你的返回值來決定行為。同樣支持異步返回 Promise。

現在的路由守衛 API 更加友好且合理了，可以完美利用?async await?做異步處理，比如這樣：

router.beforeEach(async?(to,?from)?=>?{//?canUserAccess()?returns?`true`?or?`false`return?await?canUserAccess(to)
})

一致的編碼

編碼方式（Encoding）做了統一的適配，現在將在不同的瀏覽器和路由位置屬性（params,?query?和?hash）中保持一致。?作為參數傳遞給?router.push()?時，不需要做任何編碼，在你使用?$route?或?useRoute()去拿到參數的時候永遠是解碼（Decoded）的狀態。

遷移成本低

Vue Router 4 主要致力于于在改善現有 Router 的同時保持非常相似的 API，如果你已經很上手舊版的 Vue Router 了，那你的遷移會做的很順利，可以查看文檔中的完整遷移指南^[5]。

展望未來

在過去的幾個月中，Vue Router 一直穩定而且好用，現在它可以做些更好玩的事兒了：

• 使用現有工具（Vetur，Vite，Devtools 等）得到更好的開發體驗。

• 與 Suspense 等現代功能更好地集成。

• RFCs 和社區共同探討出更好用的 API。

• 開發更輕型的版本。

試試看

等不及想試試 Vue Router 4 了？這里有CodeSandbox^[6]，還有集成好 Tailwind CSS 的 Vite 模板^[7]，或使用CLI^[8]來開始你的游玩。

想學習 Vue Router 4 的更多先進理念了？請立刻查看我們的新文檔^[9]。?如果您是現有的 Vue 2.x 用戶，請直接轉到遷移指南^[10]。

“

發布地址：https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0

”

參考資料

[1]

RFC:https://github.com/vuejs/rfcs/pulls?q=is%3Apr+sort%3Aupdated-desc+label%3Arouter+is%3Aclosed

[2]

動態路由:https://next.router.vuejs.org/guide/advanced/dynamic-routing.html

[3]

Path Ranker:https://paths.esm.dev/?p=AAMeJVyBwRkJTALagIAOuGrgACU.#

[4]

Vue Devtools:https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg

[5]

完整遷移指南:https://next.router.vuejs.org/guide/migration/index.html

[6]

CodeSandbox:https://codesandbox.io/s/vue-router-4-reproduction-hb9lh

[7]

集成好 Tailwind CSS 的 Vite 模板:https://vite-tailwind.esm.dev/about

[8]

CLI:https://cli.vuejs.org/

[9]

新文檔:https://next.router.vuejs.org/

[10]

遷移指南:https://next.router.vuejs.org/guide/migration/index.html#breaking-changes

相關閱讀

深入揭秘前端路由本質，手寫 mini-router

推薦閱讀

知乎問答：一年內的前端看不懂前端框架源碼怎么辦？
我在阿里招前端，我該怎么幫你？（文末有福利）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何做出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？

末尾

你好，我是若川，江湖人稱菜如若川，歷時一年只寫了一個學習源碼整體架構系列~(點擊藍字了解我)

1. 關注若川視野，回復"pdf" 領取優質前端書籍pdf，回復"加群"，可加群長期交流學習

2. 我的博客地址：https://lxchuan12.gitee.io?歡迎收藏

3. 覺得文章不錯，可以點個在看呀^_^另外歡迎留言交流～

   

小提醒：若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點擊閱讀，也可以星標我的公眾號，便于查找