通过 100 多个技巧学习 Nuxt!

addRouteMiddleware

addRouteMiddleware() 是一个辅助函数,用于在您的应用程序中动态添加中间件。
路由中间件是存储在 Nuxt 应用程序的 middleware/ 目录中的导航守卫(除非另有设置)。

类型

addRouteMiddleware (name: string | RouteMiddleware, middleware?: RouteMiddleware, options: AddRouteMiddlewareOptions = {})

参数

name

  • 类型: string | RouteMiddleware

可以是字符串或 RouteMiddleware 类型的函数。函数将下一个路由 to 作为第一个参数,当前路由 from 作为第二个参数,两者都是 Vue 路由对象。

了解有关路由对象可用属性的更多信息。

middleware

  • 类型: RouteMiddleware

第二个参数是 RouteMiddleware 类型的函数。与上面相同,它提供 tofrom 路由对象。如果 addRouteMiddleware() 中的第一个参数已经作为函数传递,则它是可选的。

options

  • 类型: AddRouteMiddlewareOptions

可选的 options 参数允许您将 global 的值设置为 true,以指示路由中间件是否为全局的(默认为 false)。

示例

匿名路由中间件

匿名路由中间件没有名称。它将一个函数作为第一个参数,使得第二个 middleware 参数变得多余

plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware((to, from) => {
    if (to.path === '/forbidden') {
      return false
    }
  })
})

命名路由中间件

命名路由中间件将字符串作为第一个参数,将函数作为第二个参数。

在插件中定义时,它会覆盖 middleware/ 目录中任何具有相同名称的现有中间件

plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('named middleware added in Nuxt plugin')
  })
})

全局路由中间件

设置可选的第三个参数 { global: true } 以指示路由中间件是否为全局的

plugins/my-plugin.ts
export default defineNuxtPlugin(() => {
  addRouteMiddleware('global-middleware', (to, from) => {
      console.log('global middleware that runs on every route change')
    },
    { global: true }
  )
})