路由

Nuxt 的核心功能之一是文件系统路由器。位于 pages/ 目录中的每个 Vue 文件都会创建一个相应的 URL（或路由），用于显示该文件的内容。通过对每个页面使用动态导入，Nuxt 利用代码分割来交付请求路由所需的最小 JavaScript 代码量。

页面

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

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

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

导航

<NuxtLink> 组件在页面之间链接。它呈现一个带有 href 属性的 <a> 标签，该属性设置为页面的路由。应用程序水合后，页面转换通过更新浏览器 URL 在 JavaScript 中执行。这避免了完整的页面刷新，并允许进行动画转换。

当 <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() 组合式 API 可用于 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. 命名路由中间件，放置在 middleware/ 目录中，并在页面上使用时通过异步导入自动加载。（**注意**：路由中间件名称规范化为 kebab-case，因此 someMiddleware 变成 some-middleware。）
3. 全局路由中间件，放置在 middleware/ 目录（带有 .global 后缀）中，并在每次路由更改时自动运行。

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

export default 
defineNuxtRouteMiddleware
((
to
, 
from
) => {
  // isAuthenticated() is an example method verifying if a user is authenticated
  if (
isAuthenticated
() === false) {
    return 
navigateTo
('/login')
  }
})

路由验证

Nuxt 通过 definePageMeta() 中的 validate 属性提供路由验证，该属性位于您希望验证的每个页面中。

validate 属性接受 route 作为参数。您可以返回布尔值以确定此路由是否为使用此页面渲染的有效路由。如果您返回 false，并且找不到其他匹配项，则会导致 404 错误。您还可以直接返回包含 statusCode/statusMessage 的对象以立即响应错误（不会检查其他匹配项）。

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

<script setup lang="ts">
definePageMeta
({
  
validate
: async (
route
) => {
    // Check if the id is made up of digits
    return typeof 
route
.
params
.
id
 === 'string' && /^\d+$/.
test
(
route
.
params
.
id
)
  }
})
</script>