Question

addRouteMiddleware() 是一个辅助函数，用于在您的应用程序中动态添加中间件。

路由中间件是存储在 Nuxt 应用程序的 middleware/ 目录中的导航守卫（除非 另行设置）。

Usage

js

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

addRouteMiddleware() 采用三个参数：

• name type: string | RouteMiddlewarename 可以是字符串或类型为 RouteMiddleware 的函数。 Function以下一个路由to作为第一个参数，当前路由from作为第二个参数，这两个都是 Vue 路由对象。
  详细了解 路由对象 的可用属性。
• middleware type: RouteMiddleware 第二个参数是RouteMiddleware类型的函数。 同上，它提供了to和from路由对象。
  如果 addRouteMiddleware() 中的第一个参数已经作为函数传递，则它变为可选。
• options type: 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 }
  )
})