2026/1/5

Vue Nuxt 3 動態路由 Dynamic Route

本篇介紹如何在Vue Nuxt 3中使用動態路由(Dynamic Route)。

動態路由可以把pages目錄中的檔案名稱加上方括號，例如pages/user/[id].vue，則此檔案即為動態路由頁面，對應路徑例如/user/:id。id為動態參數，在頁面中可透過以下取得。

const route = useRoute();
const id = route.params.id;

要注意Nuxt 3會優先匹配靜態路由。例如同時存在以下路由則/user/123會優先匹配靜態路由pages/user.vue，導致動態路由pages/user/[id].vue無法被匹配到。

pages/user.vue
pages/user/[id].vue

此時應該把pages/user.vue修改為pages/user/index.vue。

pages/user/index.vue <--- /user
pages/user/[id].vue  <--- /user/123

事前要求

參考「Vue Nuxt 3 加入側邊選單」建立側邊選單，本篇依此修改。

調整pages/home/export.vue

這邊要利用原本的export.vue來展示動態路由的使用。在pages/home目錄下新增export目錄，把export.vue移動到pages/home/export/index.vue，並修改內容如下。

pages/home/export/index.vue

<template>
  <div>
    <h1>出口業務</h1>
    <ul>
      <li v-for="order in orders" :key="order.id">
        <NuxtLink :to="`/home/export/${order.id}`">
          訂單 #{{ order.id }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<script setup>
const orders = [
  { id: 10001 },
  { id: 10002 },
  { id: 10003 },
]
</script>

在程式中寫死的訂單陣列物件也可改用useFetch從API取得。

新增動態路由頁面

在pages/home/export目錄下新增[orderId].vue檔案，為訂單明細，內容如下。

pages/home/export/[orderId].vue

<script setup>
const route = useRoute()
const orderId = route.params.orderId
</script>

<template>
  <div>
    <h1>訂單詳情 #{{ orderId }}</h1>
    <NuxtLink to="/home/export">返回列表</NuxtLink>
  </div>
</template>

使用route.params.orderId取得動態參數。

github

效果如下，點選左側[出口業務]。