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的导航中间件的文章不多,所以希望我的这篇文章可以帮助到你。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 11. Nuxt3 middleware路由中间件

发表回复

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们