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

Pode ser uma string ou uma função do tipo RouteMiddleware. A função recebe a próxima rota to como o primeiro argumento e a rota atual from como o segundo argumento, ambos são objetos de rota do Vue.

Saiba mais sobre as propriedades disponíveis dos objetos de rota.

middleware

• Tipo: RouteMiddleware

O segundo argumento é uma função do tipo RouteMiddleware. Assim como acima, ela fornece os objetos de rota to e from. Torna-se opcional se o primeiro argumento em addRouteMiddleware() já for passado como uma função.

options

• Tipo: AddRouteMiddlewareOptions

Um argumento options opcional permite definir o valor de global como true para indicar se o middleware do roteador é global ou não (definido como false por padrão).

Exemplos

Middleware de Rota Nomeado

O middleware de rota nomeado é definido fornecendo uma string como o primeiro argumento e uma função como o segundo:

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('middleware nomeado adicionado no plugin Nuxt')
  })
})

Quando definido em um plugin, ele substitui qualquer middleware existente com o mesmo nome localizado no diretório middleware/.

Middleware de Rota Global

O middleware de rota global pode ser definido de duas maneiras:

• Passe uma função diretamente como o primeiro argumento sem um nome. Ela será automaticamente tratada como middleware global e aplicada em cada mudança de rota.

  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware((to, from) => {
      console.log('middleware global anônimo que é executado em cada mudança de rota')
    })
  })
  

• Defina um terceiro argumento opcional { global: true } para indicar se o middleware de rota é global.

  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware('global-middleware', (to, from) => {
        console.log('middleware global que é executado em cada mudança de rota')
      },
      { global: true }
    )
  })