Nested Routes

<NuxtPage> 컴포넌트를 사용하여 중첩된 경로(nested routes)를 표시할 수 있습니다.

예를 들어 다음과 같은 페이지 구조를 가질 때

-| pages/
---| parent/
------| child.vue
---| parent.vue

위 디렉토리는 아래와 같은 라우트 정보로 생성됩니다.

[
  {
    path: '/parent',
    component: '~/pages/parent.vue',
    name: 'parent',
    children: [
      {
        path: 'child',
        component: '~/pages/parent/child.vue',
        name: 'parent-child'
      }
    ]
  }
]

child.vue 컴포넌트를 화면에 표시하려면 pages/parent.vue 안에 <NuxtPage> 컴포넌트를 삽입해야 합니다.

pages/parent.vue

<template>
  <div>
    <h1>I am the parent view</h1>
    <NuxtPage :foobar="123" />
  </div>
</template>

실습

중첩 라우트을 구성해보고 definePageMeta 함수의 몇 가지 속성에 대해 실습해 보겠습니다.

중첩 라우팅 실습

Keepalive 실습