關(guān)注若川視野，回復(fù)"pdf" 領(lǐng)取資料，回復(fù)"加群"，可加群長期交流學(xué)習(xí)

12月8日，Vue Router 4 正式發(fā)布穩(wěn)定版本。

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

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

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

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

• History 實現(xiàn)：?處理地址欄，并且特定于 Vue Router 運行的環(huán)境（節(jié)點，瀏覽器，移動設(shè)備等）

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

• Router: 將一切連接在一起，并處理路由特定功能，例如導(dǎo)航守衛(wèi)。

動態(tài)路由

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

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

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

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

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

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

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

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

更強大的 Devtools

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

時間軸記錄路由變化：

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

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

和next說拜拜，現(xiàn)在確認(rèn)跳轉(zhuǎn)不需要再手動執(zhí)行這個函數(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()?時，不需要做任何編碼，在你使用?$route?或?useRoute()去拿到參數(shù)的時候永遠(yuǎn)是解碼（Decoded）的狀態(tài)。

遷移成本低

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

展望未來

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

• 使用現(xiàn)有工具（Vetur，Vite，Devtools 等）得到更好的開發(fā)體驗。

• 與 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)理念了？請立刻查看我們的新文檔^[9]。?如果您是現(xiàn)有的 Vue 2.x 用戶，請直接轉(zhuǎn)到遷移指南^[10]。

“

發(fā)布地址：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]

動態(tài)路由: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

相關(guān)閱讀

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

推薦閱讀

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

末尾

你好，我是若川，江湖人稱菜如若川，歷時一年只寫了一個學(xué)習(xí)源碼整體架構(gòu)系列~(點擊藍(lán)字了解我)

關(guān)注若川視野，回復(fù)"pdf" 領(lǐng)取優(yōu)質(zhì)前端書籍pdf，回復(fù)"加群"，可加群長期交流學(xué)習(xí)

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

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

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

總結(jié)

以上是生活随笔為你收集整理的Vue Router 4.0 正式发布！焕然一新。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。