Os middlewares de rota são armazenados no diretório middleware/ da sua aplicação Nuxt (a menos que configurado de outra forma).

Tipo

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

interface RouteMiddleware {
  (to: RouteLocationNormalized, from: RouteLocationNormalized): ReturnType<NavigationGuard>
}

Parâmetros

middleware

• Tipo: RouteMiddleware

Uma função que recebe dois objetos de localização de rota do Vue Router como parâmetros: a próxima rota to como o primeiro, e a rota atual from como o segundo.

Saiba mais sobre as propriedades disponíveis de RouteLocationNormalized na documentação do Vue Router.

Exemplos

Mostrando Página de Erro

Você pode usar middleware de rota para lançar erros e mostrar mensagens de erro úteis:

export default defineNuxtRouteMiddleware((to) => {
  if (to.params.id === '1') {
    throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
  }
})

O middleware de rota acima redirecionará um usuário para a página de erro personalizada definida no arquivo ~/error.vue, e exibirá a mensagem de erro e o código passado pelo middleware.

Redirecionamento

Use useState em combinação com a função auxiliar navigateTo dentro do middleware de rota para redirecionar usuários para diferentes rotas com base em seu status de autenticação:

export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')

  if (!auth.value.isAuthenticated) {
    return navigateTo('/login')
  }

  if (to.path !== '/dashboard') {
    return navigateTo('/dashboard')
  }
})

Tanto navigateTo quanto abortNavigation são funções auxiliares disponíveis globalmente que você pode usar dentro de defineNuxtRouteMiddleware.