Nuxt3 提供了路由中间件的概念，你可以在整个应用使用它，目的是在导航到某一个页面之前，执行一些代码。最常见的路由守卫就可以用这个实现。
中间件的基本格式
我们先写一个最简单的中间件，就是在控制台打印来的页面，和要去的页面。目的是通过最简单的实例来了解中间件的基本格式。 在项目根目录，新建一个middleware的文件夹，然后在文件下边新建一个文件default.global.ts 的文件。其中的.global代表这个中间件是全局的，也就是在每次跳转都会执行下面的代码。
export default defineNuxtRouteMiddleware((to, from) => {
console.log("要去那个页面:"+to.path)
console.log("来自那个页面:"+from.path)
})
写完之后，我们可以到浏览器看一下效果。如果一切正常，你可以看到，这时候你在每次跳转时，都会在终端中打出结果。
当然我们可以继续编写代码，看看to 和from里到底都有什么属性。
export default defineNuxtRouteMiddleware((to, from) => {
console.log("要去那个页面:"+to.path)
console.log(to)
console.log("来自那个页面:"+from.path)
console.log(from)
})
可以看到里边的内容是非常多的，特别是to的时候，你可以根据这些来进行编程。
通过中间件 设置路由守卫
当我们了解路由中间件的基本写法后，在增加一些难度，来模仿一下路由守卫。比如我们要访问的页面是 http://localhost:3000/demo1，现在设置路由守卫，不允许访问，而是跳回到首页。那代码就可以写成下面的样子:
export default defineNuxtRouteMiddleware((to, from) => {
if (to.path === '/demo1') {
console.log('禁止访问这个页面')
abortNavigation() //停止当前导航，可以使用 error 进行报错
return navigateTo('/')
}
})
这时候再到浏览器访问demo1 页面，已经不能访问了，但其他页面是可以访问的。
只对一个页面起作用
上面都是对所有路由起作用的，如果只想中间件对一个特殊页面起作用，也是可以的。只要去掉.global的后缀就是可以的。 在middleware 文件夹下，新建一个页面，default.ts，并编写下面的代码：
export default defineNuxtRouteMiddleware((to, from) => {
console.log("Hello mybj123.com")
})
这时候它对任何页面都是不起作用的，你需要再去对应的页面里注册一下。去pages文件夹，新建一个文件demo7.vue。然后需要注册这个页面使用这个中间件，代码如下：
<template>
<div >Demo7 Page</div>
</template>
<script setup>
definePageMeta({
middleware: ["default"],
// or middleware: 'auth'
});
</script>
<style scoped></style>
这样就对这个页面注册了一个专属的导航中间件。
我刚才看了一下，网上关于 Nuxt3 的导航中间件的文章不多，所以希望我的这篇文章可以帮助到你。