defineNuxtRouteMiddleware

Source
Создание именованного route middleware.

Маршрутные middleware хранятся в app/middleware/ (если путь не переопределён).

Тип

Signature
export function defineNuxtRouteMiddleware (middleware: RouteMiddleware): RouteMiddleware

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

Параметры

middleware

  • Тип: RouteMiddleware

Функция с двумя аргументами — объектами локации Vue Router: целевой маршрут to и текущий from.

Свойства RouteLocationNormalized: документация Vue Router.

Примеры

Показ страницы ошибки

В middleware можно выбрасывать ошибку и показывать страницу ошибки:

app/middleware/error.ts
export default defineNuxtRouteMiddleware((to) => {
  if (to.params.id === '1') {
    throw createError({ status: 404, statusText: 'Page Not Found' })
  }
})

Пользователь будет перенаправлен на кастомную страницу ошибки из ~/error.vue с сообщением и кодом из middleware.

Редирект

В middleware можно использовать useState и хелпер navigateTo для редиректа в зависимости от авторизации:

app/middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const auth = useState('auth')

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

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

navigateTo и abortNavigation доступны глобально внутри defineNuxtRouteMiddleware.