在 NuxtJS 中，开发者通常不再需要使用 Vue Router 来创建页面路由。相反，每当向 pages 目录中添加文件时，Nuxt 会自动为其生成对应的路由。

本课程将介绍在 Nuxt 中实现这一功能的多种方式。

文件基于路由的优势

虽然文件基于路由初看可能有些奇怪，但它确实带来了一些显著的优势。

使用文件基于路由时，无需配置文件来定义路由与对应页面之间的关联。路由路径由页面文件的名称和目录结构自动生成。

这种机制消除了在开发过程中设置路由配置的繁琐步骤。此外，文件基于路由带来的代码组织方式使得调试路由更加直观——页面组件的文件路径与浏览器中的 URL 高度一致。

文件基于路由还赋予开发者创建自定义路由的灵活性。通过在文件名中使用动态参数，可以轻松创建动态路由。通过在同一目录下添加子路由和 index.vue 文件，可以实现嵌套路由。而结合两者，还能创建动态嵌套路由。

路由类型

Nuxt 为开发者提供了创建不同类型页面路由的灵活性。主要支持以下几种路由类型：

• 首页路由（Index route）
• 基础路由（Basic route）
• 动态路由（Dynamic route）

上述单页应用（SPA）演示了这些路由类型在 Nuxt 应用中的定义与使用。

首页路由

首页路由通过创建 index.vue 文件来定义。当在 pages 目录下的某个子目录中创建 index.vue 文件时，Nuxt 会将其视为该目录的默认页面。这意味着用户访问对应 URL 时，Nuxt 会自动加载并渲染该 index.vue 组件作为页面主要内容。

在上述 SPA 中，pages/index.vue 文件代表应用的首页，即应用启动时默认显示的页面。同时，pages/survey/index.vue 文件则表示 /survey 路由的默认页面。

基础路由

基础路由通过文件路径直接定义。例如，若需创建一个相对路径为 /test 的测试页面，只需在 pages 目录下创建名为 test.vue 的文件即可。其完整相对路径为 /pages/test.vue。

动态路由

一个典型的动态路由场景是“调查表单”页面，如在《为项目选择渲染模式》一课中所述。该页面的路径被定义为 /survey/:id。

路径中的 :id 表示该部分将由实际的调查 ID 替代。服务器利用此 ID 查找对应的调查内容。将 ID 作为路由参数，使浏览器能够通过该 ID 发起请求，获取完整的调查数据。

在 Nuxt 3 中，只需创建一个以方括号包裹参数名的文件或目录即可定义此类路由。因此，要创建 /survey/:id 路由，应在 survey 目录下创建名为 [id].vue 的文件。注意，在 Nuxt 2 中曾使用下划线前缀（如 _id.vue），但 Nuxt 3 已采用新的命名规范。

从 URL 获取动态参数

使用组合式 API 时，根据使用位置的不同，有两种方式获取动态参数：

• 在模板中，可通过传入所有页面的 $route 对象访问参数。

1<template>
2    <div>模板中获取的 ID：{{ $route.params.id }}</div>
3</template>

• 在 <script> 标签中，可使用全局函数 useRoute()。该函数也可在 vue-router 模块中找到。

1<script setup lang="ts">
2const route = useRoute()
3const id = route.params.id
4</script>

在上方的 SPA 示例中，/survey/:id 路由对应的页面文件位于 pages/survey/[id].vue。为了测试该功能，导航栏中已添加跳转至 /survey/2 的链接。运行 SPA 并点击该链接，即可查看效果。

嵌套路由

在 Web 开发中，嵌套路由指路由按层级结构组织。这意味着嵌套路由共享一个根父级，用于定义整体视图布局。

例如，《为项目选择渲染模式》一课中提到的管理员视图，可设计为嵌套结构。其中 /admin 是父级页面，其子路由如下：

• 管理员页面：/admin
  • 创建调查：/admin/survey/create
  • 查看调查列表：/admin/surveys
  • 查看/编辑调查：/admin/survey/:id
  • 查看调查回复：/admin/survey/:id/responses

以下是使用 Vue Router 实现该结构所需的配置：

1// router.js
2
3import Vue from 'vue';
4import VueRouter from 'vue-router';
5
6// 导入各页面组件
7import AdminPage from '@/views/AdminPage.vue';
8import SurveyCreatePage from '@/views/SurveyCreatePage.vue';
9import SurveyListPage from '@/views/SurveyListPage.vue';
10import SurveyPage from '@/views/SurveyPage.vue';
11import SurveyResponses from '@/views/SurveyResponses.vue';
12
13Vue.use(VueRouter);
14
15const routes = [
16  {
17    path: '/admin',
18    component: AdminPage,
19    children: [
20      {
21        path: 'surveys/create',
22        name: 'Create Survey',
23        component: SurveyCreatePage,
24      },
25      {
26        path: 'surveys',
27        name: 'List Surveys',
28        component: SurveyListPage,
29      },
30      {
31        path: 'surveys/:id',
32        name: 'View/update Survey',
33        component: SurveyPage,
34      },
35      {
36        path: 'surveys/:id/responses',
37        name: 'View Survey responses',
38        component: SurveyResponses,
39      },
40    ],
41  },
42];
43
44const router = new VueRouter({
45  mode: 'history', // 使用 history 模式以获得无哈希的干净 URL
46  routes,
47});
48
49export default router;

然而，在 Nuxt 中，创建这类嵌套路由仅需在 pages 目录中添加相应的文件和目录即可。

为测试该路由，请运行本课顶部的 SPA，并点击导航栏中的管理员页面链接。

总结

文件基于路由是 Nuxt 提供的一项强大功能，极大提升了开发体验。它允许开发者轻松定义动态路由、嵌套路由，并灵活处理各种 URL 模式。这一机制为构建复杂应用提供了高度的灵活性与控制力，是使用 Nuxt.js 构建现代 Web 应用不可或缺的工具。