为什么文件可以变成 Router？

学习目标

理解 Nuxt 最经典的设计之一：文件即路由（File-based Routing）。

学完这一章，你应该能够做到：

• 看到 pages 目录，就知道网站有哪些 URL
• 理解为什么 Nuxt 不需要手写 Vue Router 配置
• 为后面的动态路由做好准备

一、这个知识解决什么问题？

如果你以前写过 Vue 项目，应该都写过这样的代码：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

每增加一个页面，都要创建组件、import 组件、添加 route 配置。项目越大，Router 文件越长。

于是我们自然会产生一个问题：

为什么 Nuxt 不需要写这些配置？

二、我们的讨论过程

第一个发现

创建项目以后，我们发现根本没有 router/ 目录，也没有 createRouter()。但浏览器访问 /about 却可以正常打开页面。Router 到底在哪里？

第二个发现

Nuxt 直接扫描 pages/ 目录，自动生成路由：

pages
├── index.vue    →  /
├── about.vue    →  /about
└── contact.vue  →  /contact

于是得到一个重要结论：

在 Nuxt 中，页面文件本身就是路由定义。

第三个发现

继续实验，目录结构决定 URL 结构：

pages/news/index.vue       →  /news
pages/user/profile.vue     →  /user/profile

三、最终结论

Nuxt 会在启动时扫描 pages/ 目录，然后自动生成 Vue Router 配置。

看到目录，就能知道网站 URL；看到 URL，也能知道对应哪个页面。

四、脑图

读图时需要分清两个阶段：

1. 开发与构建阶段：Nuxt 扫描 pages/，根据文件路径生成路由配置。
2. 浏览器运行阶段：Vue Router 读取当前 URL，从生成的配置中找到对应 Page。

pages/ 不是 Router 本身，而是 Router 配置的单一来源。

五、容易踩坑

❌ Nuxt 没有 Router

不是。Nuxt 内部仍然使用 Vue Router，只是 Router 配置由 Nuxt 自动生成。

❌ pages 就是 Router

准确来说：pages → Nuxt 扫描 → 生成 Router → Vue Router 工作。

❌ 修改 pages 不需要重启

开发模式下一般会自动更新，但某些特殊配置下仍可能需要重启开发服务器。

一句话记忆

目录决定 URL，Nuxt 负责生成 Router。