页面与文件路由基础

13-1

你打开浏览器输入一个网址，比如 https://example.com/about，页面就跳到了「关于我们」。在网站里，网址和页面内容的这种对应关系，叫做路由（routing）。传统做法要你自己写代码，把每个网址手动绑定到一个页面组件。

Nuxt 走了一条更省心的路：文件系统路由（file-based routing）。它的想法特别直接——你把 .vue 文件放进 app/pages 目录，文件的路径就自动变成网址。你不用写任何路由配置，加一个文件就多一个页面，删一个文件就少一个页面。

13-2

在 Nuxt 4 里，页面要放在 app/pages/ 目录下面。这是 Nuxt 4 相对 Nuxt 3 的一个整齐改动：所有「应用代码」都收进了 app/ 这个根目录。

想让首页（/）有内容，就建 app/pages/index.vue。想加一个 /about 页面，就建 app/pages/about.vue。目录结构怎么写，网址就怎么排，几乎是一对一的关系。

<template>
  <div>
    <h1>欢迎来到首页</h1>
  </div>
</template>

<template>
  <section>
    <p>这个页面会在 /about 这个网址下显示。</p>
  </section>
</template>

13-3

光有 pages 目录还不够。Nuxt 需要一个「出口」，告诉框架：页面的内容到底画在哪里。这个出口就是 <NuxtPage /> 组件。

在 Nuxt 4 的入口文件 app/app.vue 里，加上 <NuxtPage />：

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

它会根据当前网址，自动把 pages 里对应的那个 .vue 文件渲染出来。像 <NuxtLink>、<NuxtLayout> 这些组件都是 Nuxt 自带、无需 import 就能直接用的。

13-4

Nuxt 在启动时会扫描 app/pages 目录，把每个文件编译成一条路由记录。下面这个目录树：

-| app/pages/
---| index.vue
---| about.vue
---| posts/
-----| [id].vue

会被 Nuxt 在内部理解成类似这样的路由表（这是示意，你不用自己写）：

{
  "routes": [
    { "path": "/", "component": "pages/index.vue" },
    { "path": "/about", "component": "pages/about.vue" },
    { "path": "/posts/:id", "component": "pages/posts/[id].vue" }
  ]
}

注意 posts/[id].vue 那一行：方括号代表「动态参数」，访问 /posts/1 或 /posts/2 都会命中它，[id] 这一段就是参数名。动态路由我们会在第 17 章详细展开。

13-5

Nuxt 给每个页面做了代码分割（code-splitting）。意思是：访问首页时，浏览器只下载首页需要的 JavaScript，不会把「关于页」「文章页」的代码一股脑全拉下来。用户点进哪个页面，才加载哪份代码。

这让首屏更快、流量更省，而且默认就是开启的，绝大多数应用都不需要去关它。只有在你确认需要把所有代码打成一个包时，才去 nuxt.config 里调整——但官方也提醒：通常这么做反而会让首屏下载量更大，所以要谨慎。

13-6

如果你维护的是 Nuxt 3 老项目，页面目录直接放在项目根目录，也就是 pages/（而不是 app/pages/）。Nuxt 4 足够聪明，能识别老结构并兼容运行，老项目不用立刻改。但新项目请一律使用 app/pages/。

13-7

顺带一提，app/pages/ 下的页面文件不强制是 .vue。Nuxt 也支持 .ts、.tsx、.js 等扩展名，你可以用渲染函数（render function）的方式写页面。不过对初学者，.vue 单文件组件最直观，建议先用它。

// 用渲染函数写页面也是合法的
export default defineComponent({
  render () {
    return h('h1', '首页')
  },
})

13-8

有人会问：页面组件里能不能没有 <script>、只写模板？完全可以。页面本质就是 Vue 组件，静态展示页只写 <template> 没问题。还有人担心「删了 app.vue 会怎样」——Nuxt 允许你直接删除 app.vue，此时它会用默认入口渲染 pages。但只要你用了 <NuxtLayout> 或自定义入口，就还是保留 app.vue 更清楚。

13-9

光看概念不够，我们走一遍真实流程。假设你刚用 npx nuxi@latest init 初始化出一个空项目：

1. 先确认 app/app.vue 里有 <NuxtPage /> 这个出口（前面讲过的）。
2. 在 app/pages/ 下新建一个 hello.vue，写上一段模板。
3. 终端执行 npm run dev 启动开发服务器。
4. 浏览器打开 http://localhost:3000/hello，页面立刻就出来了。

整个过程你没写一行路由配置，全靠「文件在哪儿、网址就是哪儿」。这也是文件路由最爽的地方：你思考的是「页面怎么分文件」，而不是「路由怎么配」。

13-10

Nuxt 把「文件路径」翻译成「网址」时，有几条隐藏规则值得记牢：

• 大小写不敏感：文件叫 AboutUs.vue，网址仍是 /aboutus。这能救你一命——手滑把大写打进地址栏也不会 404。
• 多级目录即多级路径：app/pages/user/profile.vue 对应 /user/profile，一层层对齐。
• 连字符与下划线：文件名里的 - 和 _ 会原样进 URL。建议统一用连字符，更符合网址习惯，也更利于 SEO。
• 不必为「分类」单独建父页：即使你没有 app/pages/blog.vue，app/pages/blog/index.vue 依然干净对应 /blog。

这些规则全是「约定优于配置」——你照着建文件，Nuxt 自己理清层级关系，不用你画路由树。

13-11

有读者会问：Nuxt 把我写的文件变成路由，那张「路由表」长什么样、存哪里？答案是：它生成在 .nuxt/ 这个隐藏目录里（具体是 dist 相关的路由模块），属于构建产物，平时不用你去翻。你只需要相信一个事实——app/pages 下的每个 .vue 文件，最终都变成一条可被访问的路由。

13-12

这一章你只需要记住三件事：页面放在 app/pages/，出口放 <NuxtPage />，文件路径即网址。下一章我们讲怎么给每个页面设置专属的元数据。