路由
Nuxt 的一个核心特性是文件系统路由。pages/ 目录中的每个 Vue 文件都会创建一个对应的 URL(或路由),以便显示文件的内容。通过为每个页面使用动态导入,Nuxt 使用代码分割来仅发送所请求路由的最小量 JavaScript。
页面
Nuxt 的路由基于 vue-router,根据pages/
目录中创建的每个组件生成路由,根据它们的文件名。
文件系统路由使用命名约定来创建动态和嵌套的路由:
| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue
导航
<NuxtLink>
组件用于在页面之间创建链接。它渲染一个 <a>
标签,并将 href
属性设置为页面的路由。一旦应用程序加载完成,页面的转换通过更新浏览器的 URL 在 JavaScript 中进行。这样可以避免全页刷新,并支持动画过渡。
当 <NuxtLink>
进入客户端视口时,Nuxt 会自动预取链接页面的组件和负载(生成的页面),以实现更快的导航。
<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>
路由参数
useRoute()
组合式函数可在 <script setup>
块或 Vue 组件的 setup()
方法中使用,以访问当前路由的详细信息。
<script setup lang="ts">
const route = useRoute()
// 当访问 /posts/1 时,route.params.id 的值为 1
console.log(route.params.id)
</script>
路由中间件
Nuxt 提供了一个可自定义的路由中间件框架,可在整个应用程序中使用。这是提取要在导航到特定路由之前运行的代码的理想方式。
路由中间件分为三种类型:
- 匿名(或内联)路由中间件,直接在使用它们的页面中定义。
- 命名路由中间件,放置在
middleware/
目录 中,并在页面中使用时将通过异步导入自动加载。(注意:路由中间件的名称会被规范化为 kebab-case,因此someMiddleware
变为some-middleware
。) - 全局路由中间件,放置在
middleware/
目录 中(附加.global
后缀),将自动在每次路由变更时运行。
下面是一个用于保护 /dashboard
页面的 auth
中间件示例:
export default defineNuxtRouteMiddleware((to, from) => {
// isAuthenticated() 是一个示例方法,用于验证用户是否已验证身份
if (isAuthenticated() === false) {
return navigateTo('/login')
}
})
路由验证
Nuxt 可以通过 definePageMeta()
中的 validate
属性进行路由验证,用于验证您希望验证的每个页面。
validate
属性接受 route
作为参数。您可以返回一个布尔值来确定是否要以此页面渲染该路由。如果返回 false
,且找不到其他匹配项,将导致 404 错误。您还可以直接返回一个包含 statusCode
/statusMessage
的对象,以立即响应错误(其他匹配项将不会被检查)。
如果您有更复杂的用例,则可以使用匿名路由中间件代替。
<script setup lang="ts">
definePageMeta({
validate: async (route) => {
// 检查id是否由数字组成
return typeof route.params.id === 'string' && /^\d+$/.test(route.params.id)
}
})
</script>