Vue Router 動態路由教學：打造靈活的頁面切換機制

當開發大型應用程式（如：電子商務、部落格）時，頁面數量往往多不勝數。我們不可能為每個商品 ID 手動撰寫靜態路由，這時 動態路徑參數 (Dynamic Route Matching) 就是解決問題的核心技術。

什麼是動態路由？

動態路由允許我們將符合特定模式的網址，映射到同一個 Vue 元件上。例如，不管是 /product/1 還是 /product/999，都會共用同一個 Product.vue 元件，並根據 ID 顯示不同的內容。

專案結構建議

我們將新增一個 Product.vue，用來模擬根據不同 ID 顯示不同產品內容的場景。

src/
 ├─ router/
 │   └─ index.js      # 路由配置檔
 ├─ views/
 │   ├─ Home.vue
 │   ├─ About.vue
 │   └─ Product.vue   # 共用的動態顯示元件
 ├─ App.vue
 └─ main.js

路由表設定：使用冒號 : 佔位符

在 router/index.js 中，我們透過 冒號 來定義動態參數。這告訴 Vue Router，這段網址是變動的。

// /router/index.js
import { createRouter, createWebHistory } from "vue-router";

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import("@/views/Home.vue"),
    },
    {
      path: "/",
      name: "about",
      component: () => import("@/views/About.vue"),
    },
    {
      path: "/product/:id", // :id 即為動態參數，可匹配 /product/a123
      name: "product",
      component: () => import("@/views/Product.vue"),
    },
    {
      path: "/:pathMatch(.*)*",
      redirect: "/",
    },
  ],
});

在元件中取得動態參數

在元件中，我們可以使用 $route.params 來取得網址上的參數。亦可使用 Vue 3 Composition API 中 useRoute 函式來存取目前的路由資訊。

<script setup>
import { useRoute } from "vue-router";

const route = useRoute();

// 在 JS 中取得參數的方法
console.log("產品 ID:", route.params.id);
</script>

<template>
  <h1>產品頁面</h1>
  <p>目前查看的產品 ID 是：{{ $route.params.id }}</p>
</template>

TIP

同一元件重複使用 : 當您從 /product/1 切換到 /product/2 時，Vue 為了效能會重複使用同一個元件實體，因此 onMounted 不會再次觸發。如果需要監控參數變化，可以使用 watch 或 watchEffect 監聽 route.params。

建立導覽連結

在導覽中，我們可以透過字串樣版或是物件形式來傳遞動態參數。

<!-- /App.vue -->
<template>
  <router-link to="/">首頁</router-link> |
  <router-link to="/about">關於</router-link> |
  <router-link to="/product/a123">產品 A</router-link> |
  <router-link
    :to="{
      name: 'product',
      params: {
        id: 'b456',
      },
    }"
    >產品 B</router-link
  >

  <RouterView />
</template>

<style>
.router-link-active {
  font-weight: bold;
  color: #42b983;
}
</style>

深度比較：動態路由 (Params) vs 查詢參數 (Query)

開發者常糾結該使用哪一種方式傳遞參數，以下是關鍵差異對照表：

特性	動態路由(Params)	查詢參數 (Query)
網址範例	/product/123	/product?id=123
定義方式	需在路由表定義 :id	不需要預先定義
取得方式	$route.params.id	$route.query.id
語意	代表「資源」的一部分 (必要)	代表「過濾/排序」條件 (非必要)
SEO 影響	較佳，有利於搜尋引擎理解層級	普通，通常被視為同一頁的不同狀態

開發小技巧

• 使用 Params：當您希望這個網址代表一個「獨立頁面」時，如：/user/away。
• 使用 Query：當您只是在做「搜尋過濾」或「分頁控制」時，例如：/search?keyword=vue&page=2。

總結

動態路由讓 Vue 應用程式能以最少的程式碼管理龐大的頁面需求。掌握了 params 的傳遞與監聽，您就能輕鬆開發出如電商平台般靈活的網頁系統！