라우트 미들웨어는 Nuxt 애플리케이션의 middleware/ 디렉토리에 저장됩니다 (다르게 설정하지 않은 경우).

타입

defineNuxtRouteMiddleware(middleware: RouteMiddleware) => RouteMiddleware

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

매개변수

middleware

• 타입: RouteMiddleware

Vue Router의 두 라우트 위치 객체를 매개변수로 받는 함수입니다. 첫 번째는 다음 라우트 to, 두 번째는 현재 라우트 from입니다.

RouteLocationNormalized의 사용 가능한 속성에 대해 더 알아보려면 **Vue Router 문서**를 참조하세요.

예시

에러 페이지 표시

라우트 미들웨어를 사용하여 에러를 발생시키고 유용한 에러 메시지를 표시할 수 있습니다:

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

위의 라우트 미들웨어는 사용자에게 ~/error.vue 파일에 정의된 커스텀 에러 페이지로 리디렉션하고, 미들웨어에서 전달된 에러 메시지와 코드를 노출합니다.

리디렉션

라우트 미들웨어 내부에서 navigateTo 헬퍼 함수와 useState를 조합하여 사용자의 인증 상태에 따라 다른 라우트로 리디렉션할 수 있습니다:

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 내부에서 사용할 수 있는 전역 헬퍼 함수입니다.