跳到主要内容
Nuxt 中文
开始使用

路由

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

Nuxt 的一个核心特性是文件系统路由器（file system router）。app/pages/ 目录中的每个 Vue 文件都会创建一个对应的 URL（或路由），用于展示该文件的内容。通过为每个页面使用动态 import，Nuxt 利用代码分割（code-splitting）来为所请求的路由发送最少的 JavaScript。

代码分割默认开启，并且对大多数应用都推荐使用。如果你有特定理由需要打包成单一 bundle，可以在 nuxt.config 中关闭它：
nuxt.config.ts
export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rolldownOptions: {
          output: {
            codeSplitting: false,
          },
        },
      },
    },
  },
})
这样会把所有 JavaScript 打包进单个文件。这很少能带来好处——即使是在慢速网络下，它通常也会增加初始下载量——因此，只有在你实测确认关闭代码分割确实有帮助时，才应这样做。

页面（Pages）

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

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

-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue
阅读更多

导航（Navigation）

<NuxtLink> 组件用于页面之间的链接。它会渲染一个 <a> 标签，其 href 属性被设置为目标页面的路由。一旦应用完成 hydration，页面过渡就会通过更新浏览器 URL 由 JavaScript 完成。这避免了整页刷新，并允许带有动画的过渡效果。

当 <NuxtLink> 在客户端进入视口时，Nuxt 会自动预取（prefetch）目标页面的组件和 payload（生成的页面），从而实现更快的导航。

app/pages/index.vue
<template>
  <header>
    <nav>
      <ul>
        <li><NuxtLink to="/about">About</NuxtLink></li>
        <li><NuxtLink to="/posts/1">Post 1</NuxtLink></li>
        <li><NuxtLink to="/posts/2">Post 2</NuxtLink></li>
      </ul>
    </nav>
  </header>
</template>
阅读更多

路由参数（Route Parameters）

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

pages/posts/[id].vue
<script setup lang="ts">
const route = useRoute()

// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
</script>
阅读更多

路由中间件（Route Middleware）

Nuxt 提供了一个可定制的路由中间件框架，你可以在整个应用中使用，非常适合抽取那些希望在导航到某个特定路由之前运行的代码。

路由中间件运行在 Nuxt 应用的 Vue 部分。尽管名字相似，但它们与 server middleware（服务端中间件）完全不同，后者运行在应用的 Nitro 服务端部分。

路由中间件不会为服务端路由（例如 /api/*）或其他服务端请求运行。要对这些请求应用中间件，请改用 server middleware。

路由中间件有三种：

  1. 匿名（或内联）路由中间件，直接在使用的页面中定义。
  2. 具名路由中间件，放置在 app/middleware/ 目录中，在页面上使用时会通过异步 import 自动加载。（注意：路由中间件名称会被规范化为 kebab-case，因此 someMiddleware 会变成 some-middleware。）
  3. 全局路由中间件，放置在 app/middleware/ 目录中（带 .global 后缀），会在每次路由变化时自动运行。

一个保护 /dashboard 页面的 auth 中间件示例：

function isAuthenticated (): boolean { return false }
// ---cut---
export default defineNuxtRouteMiddleware((to, from) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (isAuthenticated() === false) {
    return navigateTo('/login')
  }
})
阅读更多

路由校验（Route Validation）

Nuxt 通过每个页面的 definePageMeta() 中的 validate 属性来提供路由校验。

validate 属性以 route 作为参数。你可以返回一个布尔值，用于决定该页面是否应当渲染这个路由。如果返回 false，会导致 404 错误。你也可以直接返回一个带有 status/statusText 的对象来自定义返回的错误。

如果你有更复杂的用例，可以使用匿名路由中间件代替。

pages/posts/[id].vue
<script setup lang="ts">
definePageMeta({
  validate (route) {
    // Check if the id is made up of digits
    return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
  },
})
</script>
阅读更多