Type

function addRouteMiddleware (name: string, middleware: RouteMiddleware, options?: AddRouteMiddlewareOptions): void
function addRouteMiddleware (middleware: RouteMiddleware): void

interface AddRouteMiddlewareOptions {
  global?: boolean
}

Parameters

name

• Type: string | RouteMiddleware

RouteMiddleware 타입의 문자열 또는 함수일 수 있습니다. 함수는 다음 라우트 to를 첫 번째 인수로, 현재 라우트 from을 두 번째 인수로 받으며, 둘 다 Vue 라우트 객체입니다.

라우트 객체의 사용 가능한 속성에 대해 더 알아보세요.

middleware

• Type: RouteMiddleware

두 번째 인수는 RouteMiddleware 타입의 함수입니다. 위와 동일하게 to와 from 라우트 객체를 제공합니다. addRouteMiddleware()의 첫 번째 인수가 이미 함수로 전달된 경우 선택 사항이 됩니다.

options

• Type: AddRouteMiddlewareOptions

선택적인 options 인수는 라우터 미들웨어가 글로벌인지 여부를 나타내기 위해 global 값을 true로 설정할 수 있게 합니다 (기본값은 false로 설정).

Examples

Named Route Middleware

이름이 지정된 라우트 미들웨어는 첫 번째 인수로 문자열을 제공하고 두 번째 인수로 함수를 제공하여 정의됩니다:

export default defineNuxtPlugin(() => {
  addRouteMiddleware('named-middleware', () => {
    console.log('Nuxt 플러그인에 추가된 이름이 지정된 미들웨어')
  })
})

플러그인에서 정의되면, middleware/ 디렉토리에 있는 동일한 이름의 기존 미들웨어를 덮어씁니다.

Global Route Middleware

글로벌 라우트 미들웨어는 두 가지 방법으로 정의할 수 있습니다:

• 이름 없이 첫 번째 인수로 함수를 직접 전달합니다. 이는 자동으로 글로벌 미들웨어로 처리되어 모든 라우트 변경 시 적용됩니다.

  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware((to, from) => {
      console.log('모든 라우트 변경 시 실행되는 익명 글로벌 미들웨어')
    })
  })
  

• 선택적인 세 번째 인수 { global: true }를 설정하여 라우트 미들웨어가 글로벌인지 여부를 나타냅니다.

  plugins/my-plugin.ts

  export default defineNuxtPlugin(() => {
    addRouteMiddleware('global-middleware', (to, from) => {
        console.log('모든 라우트 변경 시 실행되는 글로벌 미들웨어')
      },
      { global: true }
    )
  })