Tipo

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

interface AddRouteMiddlewareOptions {
  global?: boolean
}

Parámetros

name

• Tipo: string | RouteMiddleware

Puede ser una cadena o una función del tipo RouteMiddleware. La función toma la siguiente ruta to como primer argumento y la ruta actual from como segundo argumento, ambos son objetos de ruta de Vue.

Aprende más sobre las propiedades disponibles de los objetos de ruta.

middleware

• Tipo: RouteMiddleware

El segundo argumento es una función del tipo RouteMiddleware. Al igual que arriba, proporciona los objetos de ruta to y from. Se vuelve opcional si el primer argumento en addRouteMiddleware() ya se pasa como una función.

options

• Tipo: AddRouteMiddlewareOptions

Un argumento opcional options te permite establecer el valor de global a true para indicar si el middleware del router es global o no (establecido en false por defecto).

Ejemplos

Middleware de Ruta Nombrado

El middleware de ruta nombrado se define proporcionando una cadena como primer argumento y una función como segundo:

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('middleware nombrado agregado en el plugin de Nuxt')
  })
})

Cuando se define en un plugin, sobrescribe cualquier middleware existente del mismo nombre ubicado en el directorio middleware/.

Middleware de Ruta Global

El middleware de ruta global se puede definir de dos maneras:

• Pasar una función directamente como el primer argumento sin un nombre. Se tratará automáticamente como middleware global y se aplicará en cada cambio de ruta.

  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware((to, from) => {
      console.log('middleware global anónimo que se ejecuta en cada cambio de ruta')
    })
  })
  

• Establecer un tercer argumento opcional { global: true } para indicar si el middleware de ruta es global.

  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware('global-middleware', (to, from) => {
        console.log('middleware global que se ejecuta en cada cambio de ruta')
      },
      { global: true }
    )
  })