Vue Router 4.0

背景

    在經曆了 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. 時間軸記錄路由變化：

完整 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

”

遷移指南

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

文章就分享到這，歡迎關注“前端大神之路”