<NuxtPage>

Source
<NuxtPage> 컴포넌트는 pages/ 디렉터리에 있는 페이지를 표시하는 데 필요합니다.

<NuxtPage> 는 Nuxt에 내장된 컴포넌트입니다. app/pages/ 디렉터리에 있는 최상위 또는 중첩된 페이지를 표시할 수 있게 해줍니다.

<NuxtPage> 는 Vue Router의 <RouterView> 를 감싼 래퍼입니다. 내부 상태를 추가로 관리하기 때문에 <RouterView> 대신 <NuxtPage> 를 사용해야 합니다. 그렇지 않으면 useRoute() 가 잘못된 경로를 반환할 수 있습니다.

<NuxtPage> 는 다음 컴포넌트들을 포함합니다:

<template>
  <RouterView v-slot="{ Component }">
    <!-- 전환(transition)을 사용할 때 선택 사항 -->
    <Transition>
      <!-- keep-alive를 사용할 때 선택 사항 -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

기본적으로 Nuxt는 <Transition> 과 <KeepAlive> 를 활성화하지 않습니다. nuxt.config 파일에서 또는 <NuxtPage> 에 transition 과 keepalive 속성을 설정하여 활성화할 수 있습니다. 특정 페이지에 대해 정의하고 싶다면, 페이지 컴포넌트의 definePageMeta 에서 설정할 수 있습니다.

페이지 컴포넌트에서 <Transition> 을 활성화하는 경우, 해당 페이지에 단일 루트 엘리먼트만 존재하도록 해야 합니다.

<NuxtPage> 는 내부적으로 <Suspense> 를 사용하기 때문에, 페이지 전환 시 컴포넌트 생명주기 동작이 일반적인 Vue 애플리케이션과는 다르게 동작합니다.

일반적인 Vue 애플리케이션에서는 이전 페이지 컴포넌트가 완전히 언마운트된 이후에만 새 페이지 컴포넌트가 마운트됩니다. 그러나 Nuxt에서는 Vue <Suspense> 의 구현 방식 때문에, 새 페이지 컴포넌트가 이전 컴포넌트가 언마운트되기 전에 마운트됩니다.

Props

  • name: <RouterView> 에게 매칭된 라우트 레코드의 components 옵션에서 해당 이름을 가진 컴포넌트를 렌더링하도록 지시합니다.
    • type: string
  • route: 모든 컴포넌트가 resolve된 라우트 위치입니다.
    • type: RouteLocationNormalized
  • pageKey: NuxtPage 컴포넌트가 언제 다시 렌더링될지 제어합니다.
    • type: string 또는 function
  • transition: NuxtPage 컴포넌트로 렌더링되는 모든 페이지에 대한 전역 전환을 정의합니다.
  • keepalive: NuxtPage 컴포넌트로 렌더링되는 페이지의 상태 보존을 제어합니다.
Nuxt는 /pages 디렉터리에서 발견되는 모든 Vue 컴포넌트 파일을 스캔하고 렌더링하여 name 과 route 를 자동으로 resolve합니다.

Example

예를 들어, 절대 변경되지 않는 key를 전달하면 <NuxtPage> 컴포넌트는 처음 마운트될 때 한 번만 렌더링됩니다.

app/app.vue
<template>
  <NuxtPage page-key="static" />
</template>

현재 라우트를 기반으로 하는 동적 key를 사용할 수도 있습니다:

<NuxtPage :page-key="route => route.fullPath" />
여기에서는 $route 객체를 사용하지 마세요. <NuxtPage> 가 <Suspense> 와 함께 페이지를 렌더링하는 방식에 문제가 생길 수 있습니다.

또는, pageKey 는 /pages 디렉터리의 Vue 컴포넌트 <script> 섹션에서 definePageMeta 를 통해 key 값으로 전달할 수도 있습니다.

app/pages/my-page.vue
<script setup lang="ts">
definePageMeta({
  key: route => route.fullPath,
})
</script>
Read and edit a live example in Docs > 4 X > Examples > Routing > Pages.

Page's Ref

페이지 컴포넌트의 ref 를 얻으려면, ref.value.pageRef 를 통해 접근합니다.

app/app.vue
<script setup lang="ts">
const page = ref()

function logFoo () {
  page.value.pageRef.foo()
}
</script>

<template>
  <NuxtPage ref="page" />
</template>
my-page.vue
<script setup lang="ts">
const foo = () => {
  console.log('foo method called')
}

defineExpose({
  foo,
})
</script>

Custom Props

<NuxtPage> 는 계층 구조 아래로 더 전달해야 할 수도 있는 커스텀 props도 받을 수 있습니다.

예를 들어, 아래 예시에서 foobar 의 값은 NuxtPage 컴포넌트로 전달된 뒤, 다시 페이지 컴포넌트들로 전달됩니다.

app/app.vue
<template>
  <NuxtPage :foobar="123" />
</template>

페이지 컴포넌트에서 foobar prop에 접근할 수 있습니다:

app/pages/page.vue
<script setup lang="ts">
const props = defineProps<{ foobar: number }>()

console.log(props.foobar) // 출력: 123

defineProps 로 prop을 정의하지 않은 경우에도, NuxtPage 로 전달된 모든 props는 페이지의 attrs 에서 직접 접근할 수 있습니다:

app/pages/page.vue
<script setup lang="ts">
const attrs = useAttrs()
console.log(attrs.foobar) // 출력: 123
</script>
Read more in Docs > 4 X > Directory Structure > App > Pages.