路由
pages/
目录中的每个文件创建一个路由。Nuxt 的核心功能之一是文件系统路由器。pages/
目录中的每个 Vue 文件都会创建一个对应的 URL(或路由),用于显示该文件的内容。通过为每个页面使用动态导入,Nuxt 利用代码分割来为请求的路由提供最少量的 JavaScript。
页面
Nuxt 路由基于 vue-router,并根据 pages/
目录中创建的每个组件的文件名生成路由。
此文件系统路由使用命名约定来创建动态和嵌套路由
-| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue
导航
<NuxtLink>
组件链接页面。它渲染一个 <a>
标签,并将 href
属性设置为页面的路由。一旦应用程序被 hydration,页面过渡将通过 JavaScript 更新浏览器 URL 来执行。这可以防止整页刷新,并允许动画过渡。
当 <NuxtLink>
在客户端进入视口时,Nuxt 将自动预取链接页面的组件和 payload(生成的页面),从而加快导航速度。
<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 提供了一个可自定义的路由中间件框架,您可以在整个应用程序中使用它,非常适合提取您希望在导航到特定路由之前运行的代码。
有三种路由中间件
- 匿名(或内联)路由中间件,直接在它们使用的页面中定义。
- 命名路由中间件,放置在
middleware/
目录中,并在页面上使用时通过异步导入自动加载。(注意:路由中间件名称被规范化为 kebab-case,因此someMiddleware
变为some-middleware
。) - 全局路由中间件,放置在
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>