Nuxt - 중첩 라우팅

https://nuxt.com/docs/guide/directory-structure/pages#nested-routes
위 Nuxt 공식 문서를 기반으로 작성하였습니다

파일 기반 라우팅

Nuxt는 파일 기반 라우팅이 이루어진다고 배웠습니다. 예시로,
아래와 같은 페이지 구조는

-| 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'
      }
    ]
  }
]

---

페이지 노출의 흐름

pages 디렉토리 구조가 위와 같을 때,

• 루트 url로 접근 시 넉스트 프로젝트 루트에 있는 app.vue 파일이 최초로 동작합니다.
• app.vue가 아래와 같고, localhost:3000/course에 접근 한다면 pages/course.vue 파일의 내용이 NuxtPage 컴포넌트 위치에 랜더링됩니다.

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<script setup lang="ts"></script>

• 이때 course.vue의 template 내에 NuxtPage가 중첩으로 존재한다면 pages/course 디렉토리 하위에서 컴포넌트를 찾아 course.vue의 NuxtPage 컴포넌트 위치에 그려집니다.

이때, course 디렉토리 하위의 index.vue를 찾게 되고 없으면 렌더링되지 않습니다.