👆建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，👇下方是本篇教學的相關筆記。

建立第一個路由頁面

在 pages 目錄下建立一個檔案 ./pages/index.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-gray-800">這裡是首頁</h1>
    </div>
  </div>
</template>

在專案目錄下的 app.vue 檔案中，新增  元件。

<template>
  <div>
    <NuxtPage />
  </div>
</template>

建立多個路由頁面

建立 About 頁面

在 pages 目錄下建立一個檔案 ./pages/about.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-yellow-400">大家好！我是 Ryan</h1>
      <p class="my-8 text-3xl text-gray-600">這裡是 /about</p>
    </div>
  </div>
</template>

建立 Contect 頁面

在 pages 目錄下建立一個檔案 ./pages/contact.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-rose-400">如果沒事不要找我 xDDD</h1>
      <p class="my-8 text-3xl text-gray-600">這裡是 /contact</p>
    </div>
  </div>
</template>

建立路由連結

在首頁 ./pages/index.vue 檔案中，使用  元件建立導航。

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-6xl font-semibold text-gray-800">這裡是首頁</h1>
      <div class="my-4 flex space-x-4">
        <NuxtLink to="/about">前往 About</NuxtLink>
        <NuxtLink to="/contact">前往 Contact</NuxtLink>
      </div>
    </div>
  </div>
</template>

帶參數的動態路由匹配

在 pages 目錄下建立 users 資料夾及一個檔案 ./pages/users/[id].vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-3xl text-gray-600">這裡是 Users 動態路由頁面</h1>
      <p class="my-8 text-3xl text-gray-600">
        匹配到的 Id: <span class="text-5xl font-semibold text-blue-600">{{ id }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const { id } = route.params
</script>

匹配所有層級的路由

在 pages 目錄下建立 catch-all 資料夾及一個檔案 ./pages/catch-all/[...slug].vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-4xl text-gray-800">這是 catch-all/... 下的頁面</h1>
      <p class="mt-8 text-3xl text-gray-600">匹配到的 Slug:</p>
      <p class="my-4 text-5xl font-semibold text-violet-500">{{ slug }}</p>
      <span class="text-xl text-gray-400">每個陣列元素對應一個層級</span>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const { slug } = route.params
</script>

建立 404 Not Found 頁面

在 pages 目錄下建立一個檔案 ./pages/[...slug].vue，並使用組合式函式 setResponseStatus 來回傳 HTTP 狀態碼 404

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-8xl font-semibold text-red-500">404</h1>
      <p class="my-8 text-3xl text-gray-800">Not Found</p>
      <p class="my-8 text-xl text-gray-800">真的是找不到這個頁面啦 😓</p>
    </div>
  </div>
</template>

<script setup>
setResponseStatus(404)
</script>

建立多層的目錄結構

在 pages 目錄下建立 category 資料夾及一個檔案 ./pages/category/index.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-4xl text-gray-600">這是 Category 首頁</h1>
      <div class="my-4 flex space-x-4">
        <NuxtLink to="/category/8"> 前往指定的類別 </NuxtLink>
        <NuxtLink to="/category/8/posts/1">前往指定類別的文章</NuxtLink>
        <NuxtLink to="/category/top-3">前往 Top 3</NuxtLink>
        <NuxtLink to="/category/top-10">前往 Top 10</NuxtLink>
      </div>
    </div>
  </div>
</template>

在 category 目錄下建立一個檔案 ./pages/category/top-[number].vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-3xl text-gray-600">這是 category/top-[number] 的頁面</h1>
      <p class="my-8 text-3xl text-gray-600">
        匹配到的 Top Number: <span class="text-5xl font-semibold text-rose-500">{{ number }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const { number } = route.params
</script>

在 category 目錄下建立 [categoryId] 資料夾及一個檔案 ./pages/category/[categoryId]/index.vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-3xl text-gray-600">這是 category/[categoryId] 的頁面</h1>
      <p class="my-8 text-3xl text-gray-600">
        匹配到的 Category Id:
        <span class="text-5xl font-semibold text-blue-600">{{ categoryId }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const { categoryId } = route.params
</script>

在 [categoryId] 目錄下建立 posts 資料夾及一個檔案 ./pages/category/[categoryId]/posts/[postId].vue：

<template>
  <div class="bg-white py-24">
    <div class="flex flex-col items-center">
      <h1 class="text-3xl text-gray-600">這是 category/[categoryId]/posts/[postId] 的頁面</h1>
      <p class="my-8 text-3xl text-gray-600">
        匹配到的 Category Id:
        <span class="text-5xl font-semibold text-blue-600">{{ categoryId }}</span>
      </p>
      <p class="my-8 text-3xl text-gray-600">
        匹配到的 Post Id:
        <span class="text-5xl font-semibold text-purple-400">{{ postId }}</span>
      </p>
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
const { categoryId, postId } = route.params
</script>

感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。

範例程式碼

• Nuxt 3 建立路由頁面

參考資料

• Nuxt Directory Structure
• Nuxt Components Directory