11. Nuxt3 middleware路由中间件

目录
文章目录隐藏
  1. 中间件的基本格式
  2. 通过中间件 设置路由守卫
  3. 只对一个页面起作用

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

「点点赞赏,手留余香」

3

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

微信微信 支付宝支付宝

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

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 11. Nuxt3 middleware路由中间件

发表回复