第五章：pages 路由系统 —— 节目单不是你手写出来的，是文件夹长出来的

Nuxt 的路由核心就是文件路由。

vue

<!-- app/pages/index.vue -->
<template>
  <h1>首页</h1>
</template>

对应：

text

vue

<!-- app/pages/about.vue -->
<template>
  <section>关于电视台</section>
</template>

对应：

text

/about

#1. 动态路由 —— 可变栏目编号

vue

<!-- app/pages/news/[slug].vue -->
<script setup lang="ts">
const route = useRoute()
</script>

<template>
  <article>新闻稿：{{ route.params.slug }}</article>
</template>

对应：

text

/news/ai-breakthrough
/news/new-framework

#2. 可选参数 —— 有这个栏目也行，没有也行

Nuxt 文档里说明，双中括号表示可选参数。

text

app/pages/[[slug]].vue

这类页面既能匹配 /，也能匹配 /test。

#3. 捕获所有路径 —— 总机转接台

text

app/pages/[...slug].vue

这种路由适合：

CMS 内容页
文档系统
多级栏目页

#4. 嵌套路由 —— 一个节目里套子栏目

text

pages/
├── parent.vue
└── parent/
    └── child.vue

父页面里需要显式放 <NuxtPage />，子页面才能显示。

vue

<!-- app/pages/parent.vue -->
<template>
  <div>
    <h1>父栏目</h1>
    <NuxtPage />
  </div>
</template>

#5. 路由组 —— 编排分组，不影响播出地址

Nuxt 4 文档里还有很实用的 route groups：

text

pages/
├── index.vue
└── (marketing)/
    ├── about.vue
    └── contact.vue

最终 URL 还是：

text

/
 /about
 /contact

括号目录只是为了组织代码，不会进入 URL。

这很像电视台内部把节目分到“新闻部”“市场部”，但观众看到的频道号不变。