路由

Nuxt 的核心功能之一是文件系统路由。在 app/pages/ 目录下的每个 Vue 文件都会创建一个相应的 URL（或路由），用于显示该文件的内容。通过对每个页面使用动态导入，Nuxt 利用代码分割（code-splitting）来为所请求的路由加载最少量的 JavaScript。

页面

Nuxt 路由基于Vue Router并根据 app/pages/ 目录下创建的每个组件的文件名，生成相应的路由。

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

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

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

导航

<NuxtLink> 组件用于页面之间的跳转。它会渲染一个 <a> 标签，并将 href 属性设置为页面的路由地址。当应用程序水合（hydrate）后，页面转换将通过 JavaScript 更新浏览器 URL 来完成。这避免了全页面刷新，并支持动画过渡。

当 <NuxtLink> 进入客户端视口时，Nuxt 会自动预加载链接页面的组件和有效负载（生成的页面），从而实现更快的导航。

<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>

路由参数

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

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

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

路由中间件

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

共有三种类型的路由中间件：

1. 匿名（或内联）路由中间件：直接定义在使用它们的页面中。
2. 具名路由中间件：放置在 app/middleware/ 目录中，并在页面使用时通过异步导入自动加载。（注意：路由中间件名称会被标准化为 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')
  }
})

<script setup lang="ts">
definePageMeta({
  middleware: 'auth',
})
</script>

<template>
  <h1>Welcome to your dashboard</h1>
</template>

路由验证

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

validate 属性接受 route 作为参数。你可以返回一个布尔值来确定该路由是否可以渲染此页面。如果返回 false，则会导致 404 错误。你也可以直接返回一个包含 status/statusText 的对象来自定义返回的错误信息。

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

<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>