Nuxt3项目实战篇3——中间件

2022-07-15 17:42:26

Nuxt 提供了一个可定制的路由中间件框架,可以在整个应用程序中使用它,适合在导航到特定路由之前运行你想要运行的代码。

路由中间件分为三种:前两种路由中间件可以定义在definePageMeta .

  • 匿名(或内联)路由中间件,直接在使用它们的页面中定义。
  • 命名路由中间件,放置在middleware/目录中,在页面使用时会通过异步导入自动加载。(注意:路由中间件名称被规范化为 kebab-case,因此someMiddleware变为some-middleware。)
  • 全局路由中间件,放置在middleware/目录中(带.global后缀),每次路由更改都会自动运行。

要使用中间件,首先要明白中间件可以干什么,我们为什么要使用中间件。

中间件的作用:1. 鉴权2. 路由守卫

现在我们看看中间件怎么使用

1. 第一种使用方式

<script setup>
definePageMeta({
  middleware: (to) => {
    return navigateTo('/aboutus')
  },
})
</script>

我在index页下面添加了这行代码,我的首页被直接重定向到了aboutus

2.第2种使用方式。 我们看看怎么鉴权: 在middleware文件夹下面新建auth.js文件,

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


//auth.js内容
export default defineNuxtPlugin(() => {
 //  可以使用addRouteMiddleware()辅助函数手动添加全局或命名路由中间件,例如在插件中。
  addRouteMiddleware('global-test', () => {
    console.log('this global middleware was added in a plugin and will be run on every route change')
  }, { global: true })

  addRouteMiddleware('named-test', () => {
    console.log('this named middleware was added in a plugin and would override any existing middleware of the same name')
  })
})

第三种使用方式:首先在middleware下新建route.global.js

//因为有.global,每次路由更改时这个文件都会自动运行, 不需要额外引入或者使用definePageMeta.
export default defineNuxtPlugin((to) => {
  //通过useNuxtApp可以获取当前页的参数
  const { $config } = useNuxtApp()
  //使用vue-router做路由守卫也行,很灵活
  const { beforeEach, } = useRouter();
 
  if (to.path === '/product') {
    return navigateTo('/product/1',{ replace: true })
  }
  if (to.path === '/index') {
    return navigateTo('/',{ replace: true })
  }
})

middleware做路由拦截, 导航守卫。发现一个坑人的地方,我想做的是,用户点击到某个地址的时候,url地址自动redirect到我指定的页, 例如,我的产品页,因为只有一个产品,所以我需要用户去/product时就直接跳转到/product/1。 但是后台却一直提示[Vue Router warn]: No match found for location with path "/product",  虽然阿不影响使用,但是这个提示看着糟心呀

表达能力有限,感觉讲得不是很清楚,请多多包涵。 源码地址:https://gitee.com/running-team/nuxt3-chapter3.git

关于

联系方式 :

mail: hey_cool@163.com ,
QQ:583459700

备案许可证编号:蜀ICP备16005545号-1 © COPYRIGHT 2015-2022 zhmzjl.com | by: KAPO