nuxt 路由一篇讲清楚

Nuxt的文件系统路由会为pages/目录中的每个文件创建一个路由。

Nuxt的核心功能之一是文件系统路由器。pages/目录中的每个Vue文件都会创建一个对应的URL（或路由），用于展示该文件的内容。通过为每个页面使用动态导入，Nuxt利用代码分割技术，只为请求的路由加载最少的JavaScript。

页面

Nuxt路由基于vue-router构建，会根据pages/目录中创建的每个组件的文件名生成路由。

这种文件系统路由采用命名约定来创建动态路由和嵌套路由：

md 复制代码

目录结构

- pages/
-- about.vue
-- index.vue
-- posts/
--- [id].vue

md 复制代码

生成的路由文件

{
  "routes": [
      {
          "path": "/about",
          "component": "pages/about.vue"
      },
      {
          "path": "/",
          "component": "pages/index.vue"
      },
      {
          "path": "/posts/:id",
          "component": "pages/posts/[id].vue"
      }
  ]
}

// pages/app.vue

<template>
  <header>
      <nav>
          <ul>
              <li><NuxtLink to="/about">关于</NuxtLink></li>
              <li><NuxtLink to="/posts/1">文章 1</NuxtLink></li>
              <li><NuxtLink to="/posts/2">文章 2</NuxtLink></li>
          </ul>
      </nav>
  </header>
</template>

Docs - API - Components - Nuxt Link.

路由参数

在Vue组件的<script setup>块或setup()方法中，可以使用useRoute()组合式API来访问当前路由的详细信息。

html 复制代码

// pages/posts/[id].vue

<script setup lang="ts">
const route = useRoute()

// 访问 /posts/1 时，route.params.id 的值为 1
console.log(route.params.id)
</script>

路由中间件

Nuxt提供了一个可自定义的路由中间件框架，你可以在整个应用中使用它，适合提取那些需要在导航到特定路由之前运行的代码。

路由中间件在Nuxt应用的Vue部分运行。尽管名称相似，但它们与服务器中间件完全不同，服务器中间件在应用的Nitro服务器部分运行。

路由中间件有三种类型：

1、匿名（或内联）路由中间件，直接定义在使用它们的页面中。

2、命名路由中间件，放置在middleware/目录中，当在页面上使用时，会通过异步导入自动加载。（注意：路由中间件的名称规范化为短横线命名法，因此someMiddleware会变为some-middleware）。

3、全局路由中间件，放置在middleware/目录中（带有.global后缀），会在每次路由变化时自动运行。

以下是保护/dashboard页面的auth中间件示例：

ts 复制代码

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
   // isAuthenticated() 是一个示例方法，用于验证用户是否已认证
   if (isAuthenticated() === false) {
       return navigateTo('/login')
   }
})

路由验证

Nuxt通过每个需要验证的页面中definePageMeta()里的validate属性提供路由验证功能。

validate属性接收route作为参数。你可以返回一个布尔值来确定这是否是一个可以用当前页面渲染的有效路由。如果返回false，将导致404错误。也可以直接返回一个包含statusCode/statusMessage的对象来自定义返回的错误。

如果有更复杂的使用场景，可以改用匿名路由中间件。

html 复制代码

// pages/posts/[id].vue
<script setup lang="ts">
definePageMeta({
    validate: async(route) => {
      // 检查 id 是否由数字组成
      return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
    }
})
</script>

核心

约定高于配置 ：通过在pages/目录中创建.vue文件，自动生成对应的路由。

代码分割：每个页面组件都用动态导入，优化首屏加载性能。

路径映射 ：文件路径直接映射为URL路径。

示例

md 复制代码

pages/
├── index.vue          → /
├── about.vue          → /about
├── posts/
│   ├── index.vue     → /posts
│   └── [id].vue      → /posts/:id (动态路由)
└── user/
    └── [id]/
        └── profile.vue → /user/:id/profile (嵌套路由)

API

<NuxtLink>：智能导航组件，支持预加载和客户端平缓过渡。

useRoute()：获取当前路由信息（参数、查询等）

definePageMeta()：定义页面元数据，包括验证规则。