今天，Vue Router 4 正式發(fā)布穩(wěn)定版本。

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

將近 2 年的時(shí)間，大約 1500 次提交，15 個(gè)RFC^[1]，無數(shù)的心血……以及許多用戶的幫助以及他們的錯(cuò)誤報(bào)告和功能請(qǐng)求。?謝謝大家的幫助！

項(xiàng)目結(jié)構(gòu)優(yōu)化

Vue Router 現(xiàn)在分為三個(gè)模塊：

• History 實(shí)現(xiàn)：?處理地址欄，并且特定于 Vue Router 運(yùn)行的環(huán)境（節(jié)點(diǎn)，瀏覽器，移動(dòng)設(shè)備等）
• Router 匹配器：處理類似?/users/:id?的路由解析和優(yōu)先級(jí)處理。
• Router: 將一切連接在一起，并處理路由特定功能，例如導(dǎo)航守衛(wèi)。

動(dòng)態(tài)路由

動(dòng)態(tài)路由^[2]是 Vue Router 最受歡迎的功能之一。?它讓路由變得更靈活，更強(qiáng)大，讓曾經(jīng)不可能的功能成為了現(xiàn)實(shí)！Vue Router4 新增了有自動(dòng)優(yōu)先級(jí)排名的高級(jí)路徑解析功能，用戶新現(xiàn)在可以以隨意的順序定義路由，因?yàn)?Router 會(huì)根據(jù) URL 字符串表示來猜測應(yīng)該匹配的路由。

優(yōu)先級(jí)排名，其實(shí)就是根據(jù)你路徑書寫的規(guī)則計(jì)算出一個(gè)得分，根據(jù)得分來優(yōu)先選用最有可能的那一項(xiàng)。

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

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

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

甚至專門有?Path Ranker^[3]?這個(gè)網(wǎng)頁來幫助你計(jì)算路由的優(yōu)先級(jí)得分。

在測試用例中，ssh 找到了一個(gè)更具體的優(yōu)先級(jí)得分排名，可以先感受一下：

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+'
??])
})

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

改進(jìn)后的導(dǎo)航系統(tǒng)

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

更強(qiáng)大的 Devtools

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

1. 時(shí)間軸記錄路由變化：

2. 完整 route 目錄，能夠幫助你輕松進(jìn)行調(diào)試：

更好的路由守衛(wèi)

和next說拜拜，現(xiàn)在確認(rèn)跳轉(zhuǎn)不需要再手動(dòng)執(zhí)行這個(gè)函數(shù)了，而是根據(jù)你的返回值來決定行為。同樣支持異步返回 Promise。

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

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

一致的編碼

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

遷移成本低

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

展望未來

在過去的幾個(gè)月中，Vue Router 一直穩(wěn)定而且好用，現(xiàn)在它可以做些更好玩的事兒了：

• 使用現(xiàn)有工具（Vetur，Vite，Devtools 等）得到更好的開發(fā)體驗(yàn)。
• 與 Suspense 等現(xiàn)代功能更好地集成。
• RFCs 和社區(qū)共同探討出更好用的 API。
• 開發(fā)更輕型的版本。

試試看

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

想學(xué)習(xí) Vue Router 4 的更多先進(jìn)理念了？請(qǐng)立刻查看我們的新文檔^[9]。?如果您是現(xiàn)有的 Vue 2.x 用戶，請(qǐng)直接轉(zhuǎn)到遷移指南^[10]。

參考資料