v4
基礎入門
CoreRouting

路由系統

Nuxt 摒棄了繁瑣的路由設定檔。你只需要在 pages/ 目錄下建立檔案，路由就會自動生成。

檔案系統路由

Nuxt 會掃描 app/pages/ 目錄下的所有 Vue 檔案，並自動為它們建立路由配置。

File Structure
  • pages/
    • index.vue/
    • about.vue/about
    • contact.vue/contact

自動化優勢

你不再需要維護冗長的 router.js。 新增檔案即新增頁面，刪除檔案即移除頁面。這讓專案結構與網址結構保持高度一致，極大降低了維護成本。

支援熱模組替換 (HMR)，新增頁面無需重啟伺服器。

路由模擬器

試著在網址列輸入不同的路徑 (例如 /users/123 或 /posts/hello-world)，觀察 Nuxt 如何匹配檔案並提取參數。

https://example.com

File System

pages/index.vue
pages/about.vue
pages/users/index.vue
pages/users/[id].vueMATCH
pages/posts/[slug].vue
pages/[...slug].vue

Route Params

// useRoute().params
{ "id": "123" }
Dynamic segments are automatically extracted.

動態路由

當你需要為不同的 ID 或 Slug 呈現相同的頁面版型時（例如產品頁、文章頁），可以使用方括號 [] 來定義動態參數。

Dynamic File
  • pages/
    • users/
      • [id].vueMatches /users/1

如何取得參數？

在元件中，使用 useRoute() Composable。

pages/users/[id].vue
<script setup>
const route = useRoute()
console.log(route.params.id)
</script>

更多模式

[...slug].vueCatch-all

匹配所有剩餘路徑。常用於 404 頁面或 CMS 內容頁。
例如: /blog/2023/nuxt-4-release

[[id]].vueOptional

可選參數。可以匹配 /users (無參數) 或 /users/1 (有參數)。

巢狀路由

Nuxt 支援巢狀路由 (Nested Routes)，這對於建立具有多層級導覽的應用程式（如後台管理系統）非常有用。

Nested Structure
  • pages/
    • dashboard.vueParent Layout
    • dashboard/
      • index.vueDefault Child
      • settings.vue/dashboard/settings

運作原理

  1. Parent Component: dashboard.vue 充當佈局容器。
  2. <NuxtPage />: 你必須在 Parent 中加入此元件，子頁面才會顯示。
  3. Child Routes: dashboard/settings.vue 的內容會被渲染到 Parent 的 <NuxtPage /> 位置。