[Nuxt3] 사용자 정의 페이지 메타 함수 definePageMeta()

definePageMeta()

---

pages/ 디렉터리에 있는 페이지 컴포넌트에 대한 메타데이터를 설정하는 데 사용할 수 있는 컴파일러 매크로 함수이다.

 

주요 요소들은 아래와 같다.

definePageMeta로 정의한 메타데이터의 주요 요소

• alias

여러 URL을 동일한 페이지로 연결할 수 있도록 별칭을 지정합니다.

• keepalive

페이지를 <KeepAlive>로 감싸 상태를 유지하도록 설정합니다.

• key

<NuxtPage>의 렌더링을 제어하기 위한 키 값을 설정합니다.

• layout

페이지에 사용할 레이아웃을 지정합니다. false로 설정하면 레이아웃을 비활성화할 수 있습니다.

• layoutTransition / pageTransition

페이지 및 레이아웃 변경 시 사용할 전환 효과를 설정합니다.

• middleware

페이지를 로드하기 전에 실행할 미들웨어를 지정합니다.

• name

페이지 경로의 이름을 정의합니다.

• path

파일명으로 표현하기 어려운 URL 패턴을 정의할 때 사용합니다.

 

위의 요소들은 기본으로 제공되는 것이 아닌, "이 필드에는 이런 값을 넣어야 한다"와 같은 약속이다.

재정의 한 뒤에는 route.meta로 접근할 수 있다.

definePageMeta로 정의하지 않으면, route.meta로 접근했을 때, 빈 객체 ( {} )로 존재하며, 기본적으로 어떤 값도 갖고 있지 않다.

---

Page Meta 정의

definePageMeta는 이러한 meta 정보를 정의할 수 있는 함수이다.

definePageMeta({
  key: (route) => route.fullPath,
  keepalive: true,
  alias: ['/lecture/:courseSlug'],
  title: 'My home page',
  pageType: 'type-card',
});

여기서 title과 pageType은 약속된 기본 요소가 아니다.

이렇게 원하는 필드를 추가하고 싶을땐, 타입을 재정의 하는 것 이 좋다.

---

사용자 정의 Page Meta

types/page-meta.d.ts

declare module '#app' {
    interface PageMeta {
        title?: string,
        pageType?: string
    }
}

export {}

---

Page Meta 접근

useRoute()로 route객체를 통해 접근할 수 있다.

const route = useRoute();
definePageMeta({
  key: (route) => route.fullPath,
  keepalive: true,
  alias: ['/lecture/:courseSlug'],
  title: 'My home page',
  pageType: 'type-card',
});

console.log("### route.meta ###");
console.log(route.meta);