09
Re:Nuxt 100 天練習曲
Day 9
網站的導航地圖 (Routing)
Day 9·路由系統·頁面導航
今天，我們來深入了解網站的結構與動線——路由 (Routing)。它決定了使用者在網址列輸入什麼，就能看到哪個頁面。
在 Nuxt 中，您不需要手動撰寫任何複雜的路由設定檔。它的核心魔法就是：檔案式路由。
檔案就是路由
規則非常簡單：您在 pages/ 資料夾裡建立的檔案與資料夾結構，會自動變成您的網站路由。
pages/index.vue會對應到
/pages/about.vue會對應到
/aboutpages/posts/[id].vue會對應到
/posts/任何東西(動態路由) 頁面之間的連結：<NuxtLink>
要讓使用者能在這些頁面間移動，我們需要使用 Nuxt 專屬的 <NuxtLink> 元件。它不僅能建立連結，還會在使用者快要點擊時預先載入頁面資源，讓切換速度感覺特別快。
Navigation.vue
<template>
<nav>
<NuxtLink to="/">首頁</NuxtLink>
<NuxtLink to="/about">關於我們</NuxtLink>
<NuxtLink to="/posts/1">第一篇文章</NuxtLink>
</nav>
</template> 讀取網址參數：useRoute()
對於動態路由（例如 pages/posts/[id].vue），我們最需要知道的就是「使用者到底想看哪一篇文章？」也就是網址中 [id] 的部分。
這時，我們可以使用 Nuxt 提供的工具 useRoute() 來取得當前路由的資訊。
pages/posts/[id].vue
<script setup>
// 1. 呼叫 useRoute() 來取得當前路由物件
const route = useRoute();
// 2. 從 route.params 中取得 id
// 如果網址是 /posts/hello-nuxt，那 postId 就會是 'hello-nuxt'
const postId = route.params.id;
</script>
<template>
<article>
<h1>文章標題</h1>
<p>您正在閱讀的文章 ID 是：{{ postId }}</p>
</article>
</template>useRoute() 是連接動態路由與頁面內容的關鍵橋樑。
今日總結
今天我們掌握了 Nuxt 路由系統的三個核心：
檔案式路由：用資料夾和檔案決定網站結構。
<NuxtLink>：建立高效能的頁面連結。
useRoute()：在動態頁面中，讀取網址上的參數。
學會了這些，您就擁有了打造一個結構完整、可互動網站的基礎。
| 檔案路徑 | 對應網址 | 說明 |
|---|---|---|
| pages/index.vue | / | 首頁 |
| pages/about.vue | /about | 靜態頁面 |
| pages/posts/[id].vue | /posts/123 | 動態路由 |
| pages/blog/[...slug].vue | /blog/2023/article | 多層動態路由 |
預告：但如果有人想進入一個需要登入才能看的頁面呢？或者，如果 id 必須是數字，但使用者卻輸入了文字怎麼辦？明天，我們將學習如何建立「路由守衛 (Route Middleware)」和「路由驗證 (Validation)」來處理這些進階情境。