El middleware de ruta se almacena en el directorio middleware/ de tu aplicación Nuxt (a menos que se configure de otra manera).

Tipo

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

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

Parámetros

middleware

• Tipo: RouteMiddleware

Una función que toma dos objetos de ubicación de ruta de Vue Router como parámetros: la siguiente ruta to como el primero, y la ruta actual from como el segundo.

Aprende más sobre las propiedades disponibles de RouteLocationNormalized en la documentación de Vue Router.

Ejemplos

Mostrando Página de Error

Puedes usar el middleware de ruta para lanzar errores y mostrar mensajes de error útiles:

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

El middleware de ruta anterior redirigirá a un usuario a la página de error personalizada definida en el archivo ~/error.vue, y expondrá el mensaje de error y el código pasado desde el middleware.

Redirección

Usa useState en combinación con la función auxiliar navigateTo dentro del middleware de ruta para redirigir a los usuarios a diferentes rutas según su estado de autenticación:

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 como abortNavigation son funciones auxiliares disponibles globalmente que puedes usar dentro de defineNuxtRouteMiddleware.