跳至主要內容
日沐 SunBathe

Appearance

Composition API 與 Router 內部原理探索 ​

這是本系列的最後一章。恭喜你堅持到這裡！

在 Vue 2 (Options API) 時代，大家都習慣用 this.$router 與 this.$route。但在 Composition API (Vue 3) 中，這一切有了新的面貌。

一、 useRouter vs useRoute ​

這兩個 Hooks 是 Vue Router 4 最重要的兩個 API。

1. useRouter (動作) ​

這個 hook 回傳的是 Router 實體。 它是一個全域唯一的單例 (Singleton)，基本上就等同於你在 router/index.js createRouter 出來的那個物件。

用途：執行「動作」。

  • router.push()
  • router.replace()
  • router.go()
  • router.beforeEach() (動態添加守衛)

2. useRoute (資料) ​

這個 hook 回傳的是 當前路由物件 (Route Location)。 它是一個 響應式物件 (Reactive Object)。

用途：獲取「資訊」。

  • route.path (路徑)
  • route.params (參數)
  • route.query (查詢參數)
  • route.meta (元資訊)

IMPORTANT

千萬不要解構 route！

javascript
// ❌ 錯誤！響應性會丟失
const { params } = useRoute();

// ✅ 正確
const route = useRoute();
console.log(route.params.id);

如果一定要解構，請使用 toRefs：

javascript
import { toRefs } from "vue";
const { params } = toRefs(route);

二、 路由是怎麼匹配的？(URL Matching) ​

你可能好奇，當你在網址列輸入 /user/123/profile 時，Vue Router 是怎麼知道要渲染哪一個組件的？

在舊版 v3 中，它使用了一個叫做 path-to-regexp 的函式庫把路徑轉成正則表達式。 但在 v4 中，Vue 團隊重寫了一個更輕量、效能更好的匹配引擎。

自定義 Matcher ​

Vue Router 其實把「URL 解析」與「組件渲染」解耦了。

核心流程如下：

  1. 使用者輸入 URL。
  2. History API 監聽變化 (popstate)。
  3. Matcher 引擎 遍歷路由表 (Routes)。
  4. 它會把路由表扁平化 (Flatten)，即使你寫的是巢狀路由，內部其實會變成類似這樣的扁平結構：
javascript
// 內部視角
[
  { path: '/user/:id', components: ... },
  { path: '/user/:id/profile', components: ... }, // 子路由被展平
]
  1. 找到匹配度最高的路由 (Score System)。
  2. 解析參數 (Params)。
  3. RouterView 根據匹配到的層級深度 (Depth)，從 matched 陣列中拿出對應的組件來渲染。

這也是為什麼巢狀路由需要嚴格的層級對應，因為 RouterView 是一個遞歸組件 (Recursive Component)。

三、 本系列總結 ​

我們從一個只有 50 行程式碼的原生 Router 開始，一路走到了現代化的 Composition API。

讓我們回顧一下這個旅程：

  1. 基礎篇 (00-01)：理解 Hash/History 原理，學會安裝與配置。
  2. 應用篇 (02-05)：掌握動態路由、巢狀佈局、程式化導航與命名視圖。
  3. 進階篇 (06-08)：利用導航守衛做權限管理，用 Transition 與 KeepAlive 做流暢體驗。
  4. 效能篇 (09)：利用 Lazy Loading 優化首屏速度。

下一步？ ​

Vue Router 還有很多與伺服器端渲染 (SSR) 相關的高級主題，例如 scrollBehavior 在 SSR 下的處理、資料預取 (Data Prefetching) 等。但對於 99% 的客戶端應用來說，你在這個系列中學到的知識已經足夠應付各種複雜場景。

感謝你的閱讀，祝你在 Vue 的世界裡開發愉快！

← 返回文章列表