defineNuxtRouteMiddleware

Исходный код
Создавайте middleware маршрута с помощью вспомогательной функции defineNuxtRouteMiddleware.

Маршрутные middleware хранятся в директории middleware/ вашего приложения Nuxt (если не задано иное).

Тип

declare function defineNuxtRouteMiddleware (
  middleware: RouteMiddleware,
): RouteMiddleware

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

Параметры

middleware

  • тип: RouteMiddleware

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

Узнайте больше о доступных свойствах RouteLocationNormalized в документации Vue Router.

Примеры

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

Вы можете использовать middleware маршрутов для генерации ошибок и отображения полезных сообщений об ошибках:

middleware/error.ts
export default defineNuxtRouteMiddleware((to) => {
  if (to.params.id === '1') {
    throw createError({ statusCode: 404, statusMessage: 'Страница не найдена' })
  }
})

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

Перенаправление

Используйте useState вместе с navigateTo в middleware маршрута, чтобы перенаправлять пользователей на разные маршруты в зависимости от статуса авторизации:

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.