第4章：路由系统（Nuxt 核心优势，无需手动配置）

1. 约定式路由基础（pages 目录下文件自动生成路由）

Nuxt.js 的路由系统基于约定式路由，即通过在 pages 目录下创建文件和目录来自动生成路由配置，无需手动配置路由。

1.1 基本路由

规则：在 pages 目录下创建 .vue 文件，自动生成对应的路由。

示例：

pages/index.vue → 路由路径：/
pages/about.vue → 路由路径：/about
pages/contact.vue → 路由路径：/contact

使用方法：

vue

<!-- pages/index.vue -->
<template>
  <div>
    <h1>Home Page</h1>
    <p>Welcome to Nuxt.js</p>
  </div>
</template>

<!-- pages/about.vue -->
<template>
  <div>
    <h1>About Page</h1>
    <p>About us</p>
  </div>
</template>

1.2 目录嵌套路由

规则：在 pages 目录下创建子目录，子目录中的文件会生成嵌套的路由。

示例：

pages/users/index.vue → 路由路径：/users
pages/users/profile.vue → 路由路径：/users/profile
pages/users/settings.vue → 路由路径：/users/settings

使用方法：

vue

<!-- pages/users/index.vue -->
<template>
  <div>
    <h1>Users Page</h1>
    <p>List of users</p>
  </div>
</template>

<!-- pages/users/profile.vue -->
<template>
  <div>
    <h1>User Profile</h1>
    <p>User profile page</p>
  </div>
</template>

2. 动态路由（[id].vue、[...slug].vue 等写法）

2.1 单个参数动态路由

规则：使用 [param].vue 命名文件，生成带参数的路由。

示例：

pages/users/[id].vue → 路由路径：/users/:id
pages/posts/[slug].vue → 路由路径：/posts/:slug

使用方法：

vue

<!-- pages/users/[id].vue -->
<template>
  <div>
    <h1>User Details</h1>
    <p>User ID: {{ route.params.id }}</p>
  </div>
</template>

<script setup>
const route = useRoute()
</script>

2.2 多个参数动态路由

规则：使用多个 [param] 命名文件或目录。

示例：

pages/users/[id]/posts/[postId].vue → 路由路径：/users/:id/posts/:postId

使用方法：

vue

<!-- pages/users/[id]/posts/[postId].vue -->
<template>
  <div>
    <h1>Post Details</h1>
    <p>User ID: {{ route.params.id }}</p>
    <p>Post ID: {{ route.params.postId }}</p>
  </div>
</template>

<script setup>
const route = useRoute()
</script>

2.3 可选参数路由

规则：使用 [...param].vue 命名文件，生成可选参数的路由。

示例：

pages/users/[...slug].vue → 路由路径：/users/*

使用方法：

vue

<!-- pages/users/[...slug].vue -->
<template>
  <div>
    <h1>Users Page</h1>
    <p>Slug: {{ route.params.slug }}</p>
  </div>
</template>

<script setup>
const route = useRoute()
</script>

3. 嵌套路由（创建嵌套页面布局）

3.1 基本嵌套路由

规则：在 pages 目录下创建与子目录同名的 .vue 文件，作为父路由组件，子目录中的文件作为子路由组件。

示例：

pages/users.vue → 父路由组件
pages/users/index.vue → 子路由组件，路径：/users
pages/users/profile.vue → 子路由组件，路径：/users/profile

使用方法：

vue

<!-- pages/users.vue -->
<template>
  <div>
    <h1>Users</h1>
    <div class="sidebar">
      <NuxtLink to="/users">User List</NuxtLink>
      <NuxtLink to="/users/profile">Profile</NuxtLink>
    </div>
    <div class="content">
      <NuxtPage />
    </div>
  </div>
</template>

<!-- pages/users/index.vue -->
<template>
  <div>
    <h2>User List</h2>
    <p>List of users</p>
  </div>
</template>

<!-- pages/users/profile.vue -->
<template>
  <div>
    <h2>Profile</h2>
    <p>User profile</p>
  </div>
</template>

3.2 动态嵌套路由

规则：结合动态路由和嵌套路由，创建带参数的嵌套路由。

示例：

pages/users/[id].vue → 父路由组件，路径：/users/:id
pages/users/[id]/profile.vue → 子路由组件，路径：/users/:id/profile
pages/users/[id]/settings.vue → 子路由组件，路径：/users/:id/settings

使用方法：

vue

<!-- pages/users/[id].vue -->
<template>
  <div>
    <h1>User {{ route.params.id }}</h1>
    <div class="sidebar">
      <NuxtLink :to="`/users/${route.params.id}/profile`">Profile</NuxtLink>
      <NuxtLink :to="`/users/${route.params.id}/settings`">Settings</NuxtLink>
    </div>
    <div class="content">
      <NuxtPage />
    </div>
  </div>
</template>

<script setup>
const route = useRoute()
</script>

<!-- pages/users/[id]/profile.vue -->
<template>
  <div>
    <h2>Profile</h2>
    <p>Profile of user {{ route.params.id }}</p>
  </div>
</template>

<script setup>
const route = useRoute()
</script>

4. 路由参数与查询（useRoute 钩子获取参数、query）

4.1 获取路由参数

使用 useRoute 钩子：

vue

<template>
  <div>
    <h1>User Details</h1>
    <p>User ID: {{ route.params.id }}</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
// 或者直接使用自动导入的 useRoute
// const route = useRoute()
</script>

4.2 获取查询参数

使用 route.query：

vue

<template>
  <div>
    <h1>Search Results</h1>
    <p>Search query: {{ route.query.q }}</p>
    <p>Page: {{ route.query.page || 1 }}</p>
  </div>
</template>

<script setup>
const route = useRoute()
</script>

4.3 监听路由变化

使用 watch 监听路由变化：

vue

<template>
  <div>
    <h1>User Details</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script setup>
import { watch } from 'vue'

const route = useRoute()
const userId = ref(route.params.id)

watch(
  () => route.params.id,
  (newId) => {
    userId.value = newId
    // 可以在这里加载新用户的数据
  }
)
</script>

5. 路由导航（NuxtLink 组件、编程式导航 useRouter）

5.1 使用 NuxtLink 组件

基本用法：

vue

<template>
  <div>
    <NuxtLink to="/">Home</NuxtLink>
    <NuxtLink to="/about">About</NuxtLink>
    <NuxtLink to="/users">Users</NuxtLink>
  </div>
</template>

带参数的路由：

vue

<template>
  <div>
    <NuxtLink :to="`/users/${userId}`">User {{ userId }}</NuxtLink>
  </div>
</template>

<script setup>
const userId = 123
</script>

带查询参数的路由：

vue

<template>
  <div>
    <NuxtLink :to="{ path: '/search', query: { q: 'nuxt' } }">Search for Nuxt</NuxtLink>
  </div>
</template>

5.2 编程式导航

使用 useRouter 钩子：

vue

<template>
  <div>
    <button @click="navigateToHome">Go Home</button>
    <button @click="navigateToUser(123)">Go to User 123</button>
  </div>
</template>

<script setup>
const router = useRouter()

function navigateToHome() {
  router.push('/')
}

function navigateToUser(id) {
  router.push(`/users/${id}`)
}
</script>

带查询参数的导航：

vue

<template>
  <div>
    <button @click="search('nuxt')">Search for Nuxt</button>
  </div>
</template>

<script setup>
const router = useRouter()

function search(query) {
  router.push({
    path: '/search',
    query: { q: query }
  })
}
</script>

替换当前路由：

vue

<template>
  <div>
    <button @click="replaceRoute">Replace Route</button>
  </div>
</template>

<script setup>
const router = useRouter()

function replaceRoute() {
  router.replace('/about')
}
</script>

返回上一页：

vue

<template>
  <div>
    <button @click="goBack">Go Back</button>
  </div>
</template>

<script setup>
const router = useRouter()

function goBack() {
  router.back()
}
</script>

6. 404 页面配置与自定义路由规则

6.1 404 页面配置

创建 pages/404.vue 文件：

vue

<template>
  <div>
    <h1>404 - Page Not Found</h1>
    <p>Sorry, the page you are looking for does not exist.</p>
    <NuxtLink to="/">Go back home</NuxtLink>
  </div>
</template>

6.2 自定义路由规则

在 nuxt.config.ts 中配置：

typescript

export default defineNuxtConfig({
  routeRules: {
    // 静态路由
    '/about': {
      static: true
    },
    // 服务端渲染路由
    '/api/**': {
      ssr: true
    },
    // 客户端渲染路由
    '/admin/**': {
      ssr: false
    }
  }
})

高级路由规则：

typescript

export default defineNuxtConfig({
  routeRules: {
    // 缓存配置
    '/blog/**': {
      cache: {
        maxAge: 60 * 60 * 24 // 24小时
      }
    },
    // 重定向
    '/old-path': {
      redirect: '/new-path'
    },
    // 代理
    '/api/**': {
      proxy: {
        to: 'https://api.example.com/**'
      }
    }
  }
})

小结

本章介绍了 Nuxt.js 的路由系统，包括约定式路由、动态路由、嵌套路由、路由参数与查询、路由导航以及 404 页面配置与自定义路由规则。通过本章的学习，你应该已经掌握了 Nuxt.js 路由系统的核心功能，能够使用 Nuxt.js 的路由系统构建各种复杂的页面导航。

在接下来的章节中，我们将学习 Nuxt.js 的页面与视图基础、数据获取与状态管理等核心特性，帮助你更深入地理解和使用 Nuxt.js。

第4章：路由系统（Nuxt 核心优势，无需手动配置） ​

1. 约定式路由基础（pages 目录下文件自动生成路由） ​

1.1 基本路由 ​

1.2 目录嵌套路由 ​

2. 动态路由（[id].vue、[...slug].vue 等写法） ​

2.1 单个参数动态路由 ​

2.2 多个参数动态路由 ​

2.3 可选参数路由 ​

3. 嵌套路由（创建嵌套页面布局） ​

3.1 基本嵌套路由 ​

3.2 动态嵌套路由 ​

4. 路由参数与查询（useRoute 钩子获取参数、query） ​

4.1 获取路由参数 ​

4.2 获取查询参数 ​

4.3 监听路由变化 ​

5. 路由导航（NuxtLink 组件、编程式导航 useRouter） ​

5.1 使用 NuxtLink 组件 ​

5.2 编程式导航 ​

6. 404 页面配置与自定义路由规则 ​

6.1 404 页面配置 ​

6.2 自定义路由规则 ​

小结 ​

第4章：路由系统（Nuxt 核心优势，无需手动配置）

1. 约定式路由基础（pages 目录下文件自动生成路由）

1.1 基本路由

1.2 目录嵌套路由

2. 动态路由（[id].vue、[...slug].vue 等写法）

2.1 单个参数动态路由

2.2 多个参数动态路由

2.3 可选参数路由

3. 嵌套路由（创建嵌套页面布局）

3.1 基本嵌套路由

3.2 动态嵌套路由

4. 路由参数与查询（useRoute 钩子获取参数、query）

4.1 获取路由参数

4.2 获取查询参数

4.3 监听路由变化

5. 路由导航（NuxtLink 组件、编程式导航 useRouter）

5.1 使用 NuxtLink 组件

5.2 编程式导航

6. 404 页面配置与自定义路由规则

6.1 404 页面配置

6.2 自定义路由规则

小结