11. Nuxt3 middleware路由中间件

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 class="">Demo7 Page</div>
</template>

<script setup>
definePageMeta({
  middleware: ["default"],
  // or middleware: 'auth'
});
</script>

<style scoped></style>

这样就对这个页面注册了一个专属的导航中间件。

我刚才看了一下，网上关于 Nuxt3 的导航中间件的文章不多，所以希望我的这篇文章可以帮助到你。

以上关于11. Nuxt3 middleware路由中间件的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。