路由
Nuxt 文件系统路由为 pages/ 目录中的每个文件创建一个路由。
Nuxt 的核心功能之一是文件系统路由器。 pages/ 目录中的每个 Vue 文件都会创建一个相应的 URL（或路由），用于显示该文件的内容。 通过对每个页面使用动态导入，Nuxt 利用代码拆分来为请求的路由提供最少的 JavaScript 代码。
页面
Nuxt 路由基于 vue-router，并根据每个在 pages/ directory 中创建的组件的文件名生成路由。
此文件系统路由使用命名约定来创建动态和嵌套路由。
| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue
导航
The <NuxtLink> 组件在页面之间链接。它渲染一个 <a> 标签，其 href 属性设置为页面的路由。一旦应用程序被水合，页面转换将通过更新浏览器 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>
路由参数
The useRoute() 可组合函数可以在 <script setup> 块或 Vue 组件的 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 提供了一个可自定义的路由中间件框架，您可以在整个应用程序中使用它，非常适合提取您希望在导航到特定路由之前运行的代码。
有三种类型的路由中间件
- 匿名（或内联）路由中间件，直接在使用它们的页面中定义。
- 命名路由中间件，放置在
middleware/目录中，并在页面上使用时通过异步导入自动加载。（注意：路由中间件名称被规范化为 kebab-case，因此someMiddleware变成some-middleware。） - 全局路由中间件，放置在
middleware/目录（带有.global后缀）中，并在每次路由更改时自动运行。
一个 auth 中间件保护 /dashboard 页面的示例
export default defineNuxtRouteMiddleware((to, from) => {
// isAuthenticated() is an example method verifying if a user is authenticated
if (isAuthenticated() === false) {
return navigateTo('/login')
}
})
路由验证
Nuxt 通过 validate 属性在 definePageMeta() 中提供路由验证，您希望验证的每个页面都包含该属性。
The 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>