本章將帶你認識 Nuxt 的動態路由系統，學習如何使用檔案命名來建立靈活的路由。
1 核心概念 Concept
Nuxt 使用 中括號 [] 來代表變數。
•
檔案命名：如果你將檔案命名為
[id].vue，它就能匹配任何「這一層」的路徑。 •
獲取參數：在程式碼中，我們使用 Nuxt 內建的工具
useRoute() 來抓取網址上的資料。 對應關係：
檔案：app/pages/users/[id].vue
網址：
/users/1👉id = 1網址：
/users/jack👉id = jack2 給 Claude Code 的中文指令 Prompt
我們要練習做一個「使用者個人頁面」的動態路由。
請複製以下指令給 Claude：
請幫我建立動態路由頁面：
- 建立一個新資料夾
app/pages/users/。 - 在該資料夾內建立一個動態路由檔案
[id].vue(請注意檔名包含中括號)。 - 在
[id].vue檔案中，使用<script setup>和useRoute()來獲取網址參數，並在 template 中顯示「你好，我是使用者：{{ route.params.id }}」。 - 修改首頁
app/pages/index.vue，加入三個<NuxtLink>分別連往：/users/1/users/jk/users/guest
3 驗收重點 Acceptance
請檢查 Claude 完成後的結果：
✓
檔案名稱檢查： 確認資料夾路徑是
app/pages/users/，且檔案名稱真的是 [id].vue (括號不能少)。 ✓
程式碼邏輯檢查： 打開
[id].vue，確認有類似這段程式碼： const route = useRoute()// 或是直接在 template 用 $route.params.id 也可以
✓
瀏覽器行為檢查：
- 回到首頁，點擊
/users/jk連結。 - 網址列變成
http://localhost:3000/users/jk。 - 畫面顯示：「你好，我是使用者：jk」。
- 手動把網址改成
/users/999，畫面應自動變成「...使用者：999」。
💡 架構師筆記 (優先順序)
這是一個常見面試題，也是開發陷阱：如果你同時擁有以下兩個檔案，Nuxt 會優先顯示哪一個？
app/pages/users/profile.vue (固定名稱)
app/pages/users/[id].vue (動態名稱)
答案：固定名稱優先。 當你訪問 /users/profile 時，Nuxt 會先看有沒有 profile.vue，有就用它；如果沒有，才會用 [id].vue 來接手。
這讓我們可以為特定頁面(如 profile 或 settings)製作特殊版型，而其他 ID 則共用動態版型。