defineNuxtRouteMiddleware

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

Тип

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

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

Параметры

middleware

• тип: RouteMiddleware

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

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

Примеры

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

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

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

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

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

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

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.