第 2 章：路由与页面

第 2 章：路由与页面（文件路由系统）

本章将完整学习 Nuxt 4 约定式文件路由，这是框架最核心、最常用的能力，全程包含可直接运行的代码 + 实战步骤，学完即可搭建项目完整路由架构。

2.1 基础路由：pages 目录与 index.vue

Nuxt 4 会自动扫描 app/pages/ 目录下的 .vue 文件生成路由，无需配置路由表。

核心规则

• app/pages/index.vue → 首页 /

• app/pages/about.vue → /about

• app/pages/books/index.vue → /books

实战代码

1，修改入口文件

<template>

<div>

<NuxtPage />

</div>

</template>

2，首页页面

app/index.vue

<template>

<div>

<h1>Diibook实战教程网 🏠</h1>

<p>欢迎来到 Nuxt 4 全栈实战项目</p>

</div>

</template>

3，关于页页面

app/pages/about.vue

<template>

<div>

<h1>About</h1>

</div>

</template>

实战步骤

1，在 pages 目录创建 index.vue、about.vue

2，运行 yarn dev

3，访问：

首页：localhost:3000/

关于页：localhost:3000/about

2.2 动态路由：[id].vue 与参数获取

动态路由用于详情页（商品、文章、用户），文件名用 [参数名] 定义。

核心规则

• app/pages/books/[id].vue → /books/1、/books/100

实战代码

app/pages/books/[id].vue

<template>

<div>

<h1>图书详情页</h1>

<p>当前图书 ID：{{ id }}</p>

</div>

</template>

<script setup>

// 获取路由实例

const route = useRoute()

// 获取动态路由参数 id

const id = route.params.id

</script>

实战演练

• 1，创建目录 books，在里面新建 [id].vue

• 2，浏览器访问：localhost:3000/books/666

• 3，页面会自动显示：当前图书 ID：666

2.3 嵌套路由：文件夹嵌套与父页面 […slug].vue

嵌套路由用于带公共布局的页面（如后台、个人中心）等。

1，基础嵌套路由

规则：父文件 + 子文件夹同名

• 父页面：app/pages/articles.vue

• 子页面：app/pages/articles/list.vue

父页面必须放置 显示子页面：

app/pages/articles.vue

<template>

<div>

<h1>文章列表页</h1>

<NuxtPage />

</div>

</template>

子页面 app/pages/articles/list.vue

<template>

<div>文章列表内容</div>

</template>

2，全匹配路由 […slug].vue

用于捕获多级路由 / 404 / 分类页等。

• app/pages/[slug].vue → /404

• app/pages/category/[slug].vue → /category/tech、/category/finance

实战代码

app/pages/[…slug].vue

<template>

<div>

<h1>全匹配路由</h1>

<p>路径片段：{{ slug }}</p>

</div>

</template>

<script setup>

const route = useRoute()

const slug = route.params.slug

</script>

实战演练

• 1，创建嵌套路由 articles.vue + articles/list.vue

• 2，访问 /articles/list 查看嵌套效果

• 3，访问 /a/b/c/d 查看 […slug].vue 捕获效果

2.4 路由跳转： 与 navigateToNuxt

Nuxt 提供两种无刷新跳转，不会重新加载页面。

1. 标签跳转 （推荐）

app/pages/index.vue

<template>

<div>

<h1>首页</h1>

<!-- 普通跳转 -->

<NuxtLink to="/about">关于我们</NuxtLink>

<!-- 动态路由跳转 -->

<NuxtLink to="/books/100">查看小册 id=100</NuxtLink>

</div>

</template>

2. 编程式跳转 navigateTo

<template>

<button @click="goToBook">跳转到小册详情</button>

</template>

<script setup>

const goToBook = () => {

// 跳转到固定页面

navigateTo('/about')

// 跳转到动态路由

navigateTo('/books/200')

// 打开外部链接

// navigateTo('https://juejin.cn', { external: true })

}

</script>

合并代码：app/pages/index.vue

<template>

<div>

<h1>Diibook实战教程网 🏠 首页</h1>

<p>欢迎来到 Nuxt 4 全栈实战项目</p>

<!-- 普通跳转 -->

<NuxtLink to="/about">关于我们</NuxtLink>

<br />

<!-- 动态路由跳转 -->

<NuxtLink to="/books/100">查看小册 id=100</NuxtLink>

<br />

<!-- 编程式跳转 -->

<button @click="goToAbout">跳转到关于我们</button>

<br />

<button @click="goToBook(100)">跳转到小册详情页</button>

<br />

<button @click="goToExternal">打开外部链接</button>

</div>

</template>

<script setup>

const goToBook = (id) => {

navigateTo(`/books/${id}`)

}

const goToAbout = () => {

navigateTo('/about')

}

const goToExternal = () => {

navigateTo('https://www.baidu.com', { external: true })

}

</script>

实战演练

• 1，在首页添加多个

• 2，编写点击事件，使用 navigateTo 跳转到动态路由

• 3，测试无刷新跳转效果

2.5 路由验证：definePageMeta

用于给页面设置标题、布局、权限、缓存，写在 script setup 最顶部。

代码示例

<script  setup>

// 页面配置

definePageMeta({

// 页面标题

title: 'Diibook实战教程网 - 首页',

// 使用的布局

layout: 'default',

// 是否需要登录（自定义标记）

requiresAuth: false,

// 是否缓存页面

keepalive: false

})

</script>

<template>

<div>页面内容</div>

</template>

实战代码

pages/books/[id].vue

<template>

<div>

<h1>图书详情页</h1>

<p>当前图书 ID：{{ id }}</p>

</div>

</template>

<script  setup  lang="js">

// 获取路由实例

const route = useRoute()

// 获取动态路由参数 id

const id = route.params.id

definePageMeta({

// 文章Id必须是数字

path: '/books/:id(\\d+)',

})

</script>

实战演练

• 1，访问 localhost:3000/books/100

• 2，访问 http://localhost:3000/books/abc，会跳转到 404 页面

2.6 404 页面与全局错误处理

1. 404 页面（未找到页面）

app/pages/[…slug].vue

<template>

<div  class="text-center p-10">

<h1>404 ❌</h1>

<p>您访问的页面不存在</p>

<br  />

<p>路径片段：{{ slug }}</p>

<NuxtLink  to="/">返回首页</NuxtLink>

</div>

</template>

<script  setup>

const route = useRoute()

const slug = route.params.slug

</script>

2. 全局错误页面 error.vue

app/error.vue，捕获所有异常（接口、服务端、渲染错误）

<template>

<div  class="p-10">

<h2>请求出错了 {{ error.statusCode }}</h2>

<p>{{ error.message }}</p>

<button  @click="retry">重试</button>

</div>

</template>

<script  setup>

const props = defineProps(['error'])

const retry = () => refreshNuxtData()

</script>

实战演练

• 1，访问一个不存在地址，查看 404

• 2，手动制造错误，查看全局错误页 (可以先删除[…slug].vue 进行测试)

本章总结

1. 基础路由：pages/ 文件自动生成路径

2. 动态路由：[id].vue 获取详情参数

3. 嵌套路由：父页面 + 子文件夹 +

4. 路由跳转： + navigateTo

5. 页面配置：definePageMeta 设置标题、布局、权限

6. 异常页面：[…slug].vue 404 + error.vue 全局错误