Vue Router 4 0 正式發布！煥然一新。

大前天，vue router 4 正式發布穩定版本。

在經歷了 14 個 alpha，13 個 beta 和 6 個 rc 版本之後，vue router v4 閃亮登場，為你帶來了 typescript 整合、新功能以及對現代應用程式的一致性改進，已經準備好成為 vue3 新應用的最佳伴侶。

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

vue router 現在分為三個模組：

router 匹配器：處理類似 /users/:id 的路由解析和優先順序處理。

router: 將一切連線在一起，並處理路由特定功能，例如導航守衛。

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

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

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

const routes =[,
]

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

甚至專門有 path ranker[3] 這個網頁來幫助你計算路由的優先順序得分。

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

it
('works',(
)=>
)

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

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

多虧了新的vue devtools[4]，vue router 能夠和瀏覽器進行以下更高階的整合。

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

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

router.
beforeeach
(async
(to,
from
)=>
)

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

vue router 4 主要致力於於在改善現有 router 的同時保持非常相似的 api，如果你已經很上手舊版的 vue router 了，那你的遷移會做的很順利，可以檢視文件中的完整遷移指南[5]。

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

等不及想試試 vue router 4 了？這裡有codesandbox[6]，還有整合好 tailwind css 的 vite 模板[7]，或使用cli[8]來開始你的遊玩。

想學習 vue router 4 的更多先進理念了？請立刻檢視我們的新文件[9]。如果您是現有的 vue 2.x 使用者，請直接轉到遷移指南[10]。

rfc動態路由

path ranker

vue devtools

完整遷移指南:

codesandbox

整合好 tailwind css 的 vite 模板

cli新文件

遷移指南

Vue Router 4 0 正式發布！煥然一新。

GTK 4 0 正式發布

大新聞！PCIe 4 0正式發布

華為Mate40系列手機正式發布

Vue Router 4 0 正式發布！煥然一新。

GTK 4 0 正式發布

大新聞！PCIe 4 0正式發布

華為Mate40系列手機正式發布

相關推薦