基于文件系统的路由是nuxt一个核心特色。每一个在pages/目录下的vue文件，被会被框架创建一个对应的URL(也叫路由)。每个pages/目录下的vue文件就是一个页面。 Nuxt利用代码拆分方式为请求的路由提供最少的JavaScript。
页面
Nuxt路由底层实现是基于vue-router的，它会为每一个在pages/目录下的组件生成与文件名对应的路由。
# pages目录
pages/
--| about.vue
--| posts/
----| [id].vue
生成对应的路由配置文件
{
"routes": [
{
"path": "/about",
"component": "pages/about.vue"
},
{
"path": "/posts/:id",
"component": "pages/posts/[id].vue"
}
]
}
此文件内容就是vue项目开发时配置路由的格式。
页面的跳转导航
<NuxtLink>组件就是用来进行页面之间的跳转导航的。此组件最终会渲染成一个带有href属性的<a>标签, href中设置的就是页面的路由。在客户端激活后，通过更新浏览器的URL来在JavaScript中执行页面的转换过渡。这样可以防止整个页面的刷新，并且可以允许页面切换的动画效果。
<NuxtLink>为了加快页面切换的速度，会在页面跳转之前预先获取所指向的下一个页面组件和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>
路由参数
我们可以在<script setup>块或者setup()方法中使用 useRoute()接口来获取当前的路由详情。
<script setup>
const route = useRoute()
// When accessing /posts/1, route.params.id will be 1
console.log(route.params.id)
</script>
路由中间件
Nuxt提供了一个可定制化的路由中间件框架，你可以在整个应用项目中使用。非常适合在你需要导航到指定路由的时候执行相关代码。 ::: alertinfo 路由中间件是在nuxt应用中的vue部分运行的。尽管名字相同，但他们与服务端的中间件是完全不一样的。服务端中间件是运行的Nitro 服务中的。 :::
nuxt3中有三种路由中间件
- 匿名(或者叫内联)的中间件：在pages目录下的以文件名自动生成对应路由的功能，就是nuxt3框架内部自动生成一些中间件来实现这一机制的。
- 命名的路由中间件：放在项目的middleware目录下。 此目录下的命名路由如果在page中使用，那nuxt3框架会自动加载此路由中间件。(注意，路由中间件名称会被统一成kebab-case格式，例如: someMiddleware 会变成 some-middleware)
- 全局的路由中间件: 放在项目根目录中的middleware目录下，并以.global为后缀。这种中间件会在每个路由切换的时候被执行。
示例：
// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
// isAuthenticated() is an example method verifying if a user is authenticated
if (isAuthenticated() === false) {
return navigateTo('/login')
}
})
<!-- pages/dashboard.vue -->
<script setup>
definePageMeta({
middleware: 'auth'
})
</script>
<template>
<h1>Welcome to your dashboard</h1>
</template>
路由验证
Nuxt支持对路由的验证。 通过在页面(page)中的definePageMeta中的validate属性来实现路由验证。
validate属性以route为参数。返回的boolean值就决定了当前路由是否会在此页面中渲染显示。如果你返回false,并且也没有其它路由匹配规则与之相匹配的话，就会导致404的错误。你也可以直接返回一个包含了statusCode/statusMessage的对象，来立即返回一个错误(这种情况下，其它路由匹配规则就不会判断了) 。
<!-- pages/post/[id].vue -->
<script setup>
definePageMeta({
validate: async (route) => {
const nuxtApp = useNuxtApp()
// Check if the id is made up of digits
return /^\d+$/.test(route.params.id)
}
})
</script>
如果你的验证逻辑非常复杂的话，最好还是使用匿名路由中间件。
版权声明：本文为凸然网站的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：nuxt3路由(Routing)使用讲解
