addRouteMiddleware

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

类型

function addRouteMiddleware (name: string, middleware: RouteMiddleware, options?: AddRouteMiddlewareOptions): void
function addRouteMiddleware (middleware: RouteMiddleware): void

interface AddRouteMiddlewareOptions {
  global?: boolean
}

参数

name

• 类型： string | RouteMiddleware

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

了解更多关于路由对象的可用属性。

middleware

• 类型： RouteMiddleware

第二个参数是一个 RouteMiddleware 类型的函数。同上，它提供 to 和 from 路由对象。如果 addRouteMiddleware() 的第一个参数已经作为函数传入，则它变为可选。

options

• 类型： AddRouteMiddlewareOptions

一个可选的 options 参数让你可以将 global 设为 true，以指示该路由中间件是否是全局的（默认设为 false）。

示例

命名路由中间件

命名路由中间件通过传入一个字符串作为第一个参数、一个函数作为第二个参数来定义：

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('在 Nuxt 插件中添加了命名中间件')
  })
})

当在插件中定义时，它会覆盖 app/middleware/ 目录中任何同名的已有中间件。

全局路由中间件

全局路由中间件可以通过两种方式定义：

• 直接传入一个函数作为第一个参数，不带名称。它会被自动视为全局中间件，并在每次路由变化时应用。
  app/plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware((to, from) => {
      console.log('在每次路由变化时运行的匿名全局中间件')
    })
  })
  

• 设置一个可选的第三个参数 { global: true } 来指示该路由中间件是否是全局的。
  app/plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware('global-middleware', (to, from) => {
      console.log('在每次路由变化时运行的全局中间件')
    },
    { global: true },
    )
  })