入门篇二：Nuxt 4路由自动生成：告别手动配置路由的日子

[四、嵌套路由：目录 + 文件的组合](#四、嵌套路由：目录 + 文件的组合)

写过 Vue Router 的同学一定有过这样的体验：每新建一个页面，就要去 router/index.js 里手动加一条路由配置。页面一多，路由配置文件又长又乱，改起来还容易出错。Nuxt 带来了一个好消息------路由自动生成 ！只需要在 pages 目录下创建文件，路由就自动生成了。今天就来看看这个"偷懒神器"怎么用。

一、开启路由功能

还记得上一篇文章里，我们的项目根目录只有一个 app.vue 吗？要启用路由功能，需要创建 pages 目录：

复制代码

mkdir pages

然后修改 app.vue，添加 <NuxtPage /> 组件：

复制代码

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

<NuxtPage /> 是 Nuxt 内置的路由出口组件，相当于 Vue Router 里的 <router-view />。

二、基础路由：文件即路由

现在来创建几个页面，感受一下路由自动生成的魔力。

创建 pages/index.vue（首页）：

复制代码

<template>
  <div class="page">
    <h1>首页</h1>
    <p>欢迎来到我的网站</p>
    <NuxtLink to="/about">关于我们</NuxtLink>
  </div>
</template>

<style scoped>
.page {
  padding: 2rem;
}
</style>

创建 pages/about.vue（关于页）：

复制代码

<template>
  <div class="page">
    <h1>关于我们</h1>
    <p>这是一个 Nuxt 4 学习项目</p>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

现在启动项目，访问 / 看到首页，访问 /about 看到关于页。完全没有配置路由文件，是不是很神奇？

Nuxt 会根据 pages 目录下的文件自动生成路由：

文件路径	路由路径
`pages/index.vue`	`/`
`pages/about.vue`	`/about`
`pages/users.vue`	`/users`
`pages/users/profile.vue`	`/users/profile`

三、动态路由：用方括号搞定

很多时候我们需要动态路由，比如文章详情页 /article/123。Nuxt 用方括号语法来实现：

创建 pages/article/[id].vue：

复制代码

<script setup lang="ts">
const route = useRoute()
const articleId = route.params.id
</script>

<template>
  <div class="page">
    <h1>文章详情</h1>
    <p>文章ID：{{ articleId }}</p>
    <NuxtLink to="/">返回首页</NuxtLink>
  </div>
</template>

现在访问 /article/123 或 /article/abc 都能正常显示，id 会自动从 URL 中提取。

💡 多个参数 ：pages/article/[id]-[slug].vue 可以匹配 /article/123-my-title

四、嵌套路由：目录 + 文件的组合

嵌套路由在后台管理系统很常见，比如左侧菜单固定，右侧内容切换。Nuxt 用同名目录 + 文件的方式实现：

创建目录结构：

复制代码

pages/
├── users/
│   ├── index.vue      # /users
│   ├── profile.vue    # /users/profile
│   └── settings.vue   # /users/settings
└── users.vue          # 用户模块布局

pages/users.vue（父级布局）：

复制代码

<template>
  <div class="users-layout">
    <nav class="sidebar">
      <NuxtLink to="/users">用户列表</NuxtLink>
      <NuxtLink to="/users/profile">个人资料</NuxtLink>
      <NuxtLink to="/users/settings">设置</NuxtLink>
    </nav>
    <main class="content">
      <NuxtPage />
    </main>
  </div>
</template>

<style scoped>
.users-layout {
  display: flex;
}

.sidebar {
  width: 200px;
  padding: 1rem;
  border-right: 1px solid #eee;
}

.sidebar a {
  display: block;
  padding: 0.5rem;
  color: #333;
  text-decoration: none;
}

.sidebar a:hover {
  background: #f5f5f5;
}

.content {
  flex: 1;
  padding: 1rem;
}
</style>

pages/users/index.vue：

复制代码

<template>
  <div>
    <h2>用户列表</h2>
    <p>这里是所有用户的列表...</p>
  </div>
</template>

现在访问 /users、/users/profile、/users/settings，左侧菜单固定，右侧内容切换，典型的嵌套路由效果。

五、路由导航：NuxtLink

页面间跳转使用 <NuxtLink>，它是 Nuxt 对 <router-link> 的封装：

复制代码

<!-- 基础用法 -->
<NuxtLink to="/about">关于我们</NuxtLink>

<!-- 带参数 -->
<NuxtLink :to="`/article/${article.id}`">{{ article.title }}</NuxtLink>

<!-- 外部链接（自动添加 target="_blank"） -->
<NuxtLink to="https://nuxt.com" external>访问 Nuxt 官网</NuxtLink>

<!-- 激活状态样式 -->
<NuxtLink to="/about" active-class="active">关于我们</NuxtLink>

<NuxtLink> 内置了预加载功能：当链接进入视口时，会自动预加载目标页面，点击后瞬间显示，用户体验超棒。

六、编程式导航

有时需要在 JavaScript 中跳转，使用 navigateTo 函数：

复制代码

<script setup lang="ts">
const goHome = () => {
  navigateTo('/')
}

const goArticle = (id: number) => {
  navigateTo(`/article/${id}`)
}
</script>

<template>
  <button @click="goHome">返回首页</button>
  <button @click="goArticle(123)">查看文章</button>
</template>

总结

今天我们学习了 Nuxt 的路由系统：

功能	实现方式
基础路由	`pages/xxx.vue` → `/xxx`
动态路由	`pages/[id].vue` → `/:id`
嵌套路由	`pages/users.vue` + `pages/users/` 目录
页面跳转	`<NuxtLink to="...">`
编程导航	`navigateTo('/path')`

记住一句话：pages 目录下的文件结构，就是你的路由结构。再也不用手写路由配置了，开发效率直接起飞！

下一篇文章，我们来聊聊组件的组织方式，看看 Nuxt 怎么帮我们自动导入组件。

觉得有用的话，点赞、在看、分享支持下！有问题评论区见 💪