definePageMeta

페이지 구성 요소에 대한 메타데이터를 정의한다.

 

definePageMeta은   pages/ 디렉토리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 데 사용할 수 있는 컴파일러 매크로이다. 이 방법으로 Nuxt 애플리케이션의 각 정적 또는 동적 경로에 대한 사용자 정의 메타데이터를 설정할 수 있다.

<!--
pges/some-page.vue
-->

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})
</script>

 

Type

definePageMeta(meta: PageMeta) => void

interface PageMeta {
  validate?: (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>
  redirect?: RouteRecordRedirectOption
  name?: string
  path?: string
  alias?: string | string[]
  pageTransition?: boolean | TransitionProps
  layoutTransition?: boolean | TransitionProps
  key?: false | string | ((route: RouteLocationNormalizedLoaded) => string)
  keepalive?: boolean | KeepAliveProps
  layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>
  middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  scrollToTop?: boolean | ((to: RouteLocationNormalizedLoaded, from: RouteLocationNormalizedLoaded) => boolean)
  [key: string]: unknown
}

 

매개변수

• meta (type : PageMeta) : 다음 페이지 메타데이터를 허용하는 개체
  • name (type : string) : 이 페이지 경로의 이름을 정의할 수 있다. 기본적으로 이름은 pages/ 디렉터리 내부 경로를 기반으로 생성된다.
  • path (type : string) : 파일 이름으로 표현할 수 있는 것보다 더 복잡한 패턴이 있는 경우 경로 일치자를 정의할 수 있다.
  • alias (type: string | string[]) : 기록의 별칭입니다. 레코드 복사본처럼 작동하는 추가 경로를 정의할 수 있다. /users/:id 및 /u/:id와 같은 경로 단축을 허용합니다. 모든 alias 및 path 값은 동일한 매개변수를 공유해야 한다.
  • keepalive (type : boolean | KeepAliveProps) : 경로 변경 시 페이지 상태를 유지하려는 경우 true 로 설정하거나 세밀한 제어를 위해 KeepAliveProps 를 사용한다.
  • key (type : false | string | ((route: RouteLocationNormalizedLoaded) => string)) : <NuxtPage> 컴포넌트가 다시 렌더링될 때 더 많은 제어가 필요한 경우  key 를 설정한다.
  • layout (type : false | LayoutKey | Ref | ComputedRef) : 각 경로에 대한 레이아웃의 정적 또는 동적 이름을 설정한다. 기본 레이아웃을 비활성화해야 하는 경우 false으로 설정할 수 있다.
  • layoutTransition(type : boolean | TransitionProps) : 현재 레이아웃에 적용할 트랜지션 이름을 설정한다. 이 값을 로 설정하여 레이아웃 전환을 비활성화할 수도 있다.
  • middleware (type :  MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>) : 익명 또는 명명된 미들웨어를 definePageMeta 내에서 직접 정의한다.
  • pageTransition (type : boolean | TransitionProps) : 현재 페이지에 적용할 전환 이름을 설정한다. 또한 이 값을 false 로 설정하여 페이지 전환을 비활성화할 수도 있다. 
  • redirect (type : RouteRecordRedirectOption) : 경로가 직접 일치하는 경우 리디렉션할 위치이다. 리디렉션은 내비게이션 가드 이전에 발생하며 새 대상 위치로 새 내비게이션을 트리거한다.
  • validate ( type : (route: RouteLocationNormalized) => boolean | Promise<boolean> | Partial<NuxtError> | Promise<Partial<NuxtError>>) : 이 페이지에서 특정 경로를 유효하게 렌더링할 수 있는지 확인한다. 유효하면 true를 반환하고, 그렇지 않으면 false를 반환한다. 다른 일치 항목을 찾을 수 없으면 이는 404를 의미한다. 또한 statusCode/statusMessage를 사용하여 개체를 직접 반환하여 오류로 즉시 응답할 수도 있다. (다른 일치 항목은 확인하지 않는다).
  • scrollToTop (type: boolean | (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean) : 페이지를 렌더링하기 전에 Nuxt에게 상단으로 스크롤할지 여부를 지시한다. Nuxt의 기본 스크롤 동작을 덮어쓰려면 ~/app/router.options.ts(문서 참조)에서 자세한 내용을 확인할 수 있다. 
  • [key: string] : (type : any) : 위 속성 외에도 사용자 정의 메타데이터 를 설정할 수도 있다. 유형이 안전한 방식으로  meta 객체의 유형을 증가시킬 수 있다

 

사용 예

기본 사용법

아래 예에서는 다음을 보여준다.

• 어떻게 key 값을 반환하는 함수가 될 수 있는지
• 어떻게 keepalive 속성을 ​​통해 <modal> 여러 구성 요소 간에 전환할 때 구성 요소가 캐시되지 않는지 확인할 수 있다.
• 사용자 정의 속성으로 pageType 추가

<!--
pages/some-page.vue
-->

<script setup lang="ts">
definePageMeta({
  key: (route) => route.fullPath,

  keepalive: {
    exclude: ['modal']
  },

  pageType: 'Checkout'
})
</script>

 

미들웨어 정의

아래 예는 definePageMeta 내에서 직접 function 혹은 디렉토리 middleware/ 에 있는 미들웨어 파일 이름과 일치하는 문자열을 사용하여 미들웨어를 정의한다.

<!--
pages/some-page.vue
-->

<script setup lang="ts">
definePageMeta({
  // define middleware as a function
  middleware: [
    function (to, from) {
      const auth = useState('auth')

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

      if (to.path !== '/checkout') {
        return navigateTo('/checkout')
      }
    }
  ],

  // ... or a string
  middleware: 'auth'

  // ... or multiple strings
  middleware: ['auth', 'another-named-middleware']
})
</script>

 

레이아웃 정의

기본적으로 layouts/ 디렉토리에 있는 레이아웃의 파일 이름과 일치하는 레이아웃을 정의할 수 있다.  ' layout : false' 로 설정하여 레이아웃을 비활성화할 수도 있다.

<!--
pages/some-page.vue
-->

<script setup lang="ts">
definePageMeta({
  // set custom layout
  layout: 'admin'

  // ... or disable a default layout
  layout: false
})
</script>