<aside> 🔖 <NuxtPage> 컴포넌트는 pages/ 디렉토리에 있는 페이지 컴포넌트를 화면에 표시하는 데 사용됩니다.

</aside>

<NuxtPage>

<NuxtPage> 컴포넌트는 Nuxt의 내장 컴포넌트입니다. pages/ 디렉토리에 있는 최상위 페이지나 중첩 페이지를 표시할 수 있습니다.

<aside> 🔖 <NuxtPage>는 Vue Router의 <RouterView> 컴포넌트를 둘러싼 래퍼입니다.

동일한 name과 route props 를 허용합니다.

</aside>

Props

• name: <RouterView>에 일치하는 경로의 컴포넌트 옵션에 해당 이름으로 컴포넌트를 렌더링하도록 지시합니다.
  • type: string
• route: 모든 컴포넌트가 해결된 경로 위치입니다.
  • type: RouteLocationNormalized
• pageKey: <NuxtPage> 컴포넌트가 다시 렌더링되는 시기를 제어합니다.
  • type: string or function

<aside> 🔖 Nuxt는 pages/ 디렉토리에 있는 모든 Vue 컴포넌트 파일을 스캔하고 렌더링하여 name과 route를 자동으로 확인합니다.

</aside>

실습 - pageKey Props

<NuxtPage>와 <RouterView>의 차이 그리고 <NuxtPage>의 동작 방식에 대해 알아보겠습니다.

이전 강의, 다음 강의 라우팅 추가

• composables/useCourse.ts - prevCourse, nextCourse
• pages/course/[courseSlug].vue

<RouterView>, <NuxtPage> 차이

• <RouterView> - <RouterView> 컴포넌트가 마운트 될 때 한번만 렌더링됨.
• <NuxtPage> - <NuxtPage> 기본적으로 라우트 path가 변경 되었을 때 다시 렌더링됨.