[Nuxt3] 중첩 라우팅

중첩 라우팅이란 상위 페이지 내에서 하위 페이지가 렌더링되는 구조를 의미합니다. 일반적으로 대시보드, 관리자 페이지, 사용자 프로필과 같은 일관된 레이아웃을 유지하면서 다른 콘텐츠를 표시할 때 유용하게 사용됩니다. 예를 들어 /dashboard 안에 /dashboard/settings, /dashboard/users 같은 하위 경로가 있을 때, 이들을 부모 컴포넌트 내부에서 관리하는 방식이 중첩 라우팅입니다.

---

 Nuxt 3 중첩 라우팅 구조 예제

/pages
 ├── index.vue            →  `/`
 ├── about.vue            →  `/about`
 ├── dashboard/
 │   ├── index.vue        →  `/dashboard`
 │   ├── settings.vue     →  `/dashboard/settings`
 │   ├── users/
 │   │   ├── index.vue    →  `/dashboard/users`
 │   │   ├── [id].vue     →  `/dashboard/users/:id`

이 구조에서 dashboard/index.vue가 부모 페이지가 되며, <NuxtPage />를 통해 하위 페이지들이 동적으로 렌더링됩니다.

기본적인 중첩 라우팅 설정

부모 컴포넌트에서 <NuxtPage /> 사용

<!-- pages/dashboard/index.vue -->
<template>
  <div>
    <h1>대시보드</h1>
    <NuxtPage />
  </div>
</template>

• /dashboard 경로에서는 이 페이지가 기본적으로 렌더링됩니다.

하위 페이지 추가

<!-- pages/dashboard/settings.vue -->
<template>
  <div>
    <h1>설정 페이지</h1>
  </div>
</template>

• /dashboard/settings에 접근하면 settings.vue가 렌더링됩니다.

<!-- pages/dashboard/users/index.vue -->
<template>
  <div>
    <h1>사용자 목록</h1>
  </div>
</template>

• /dashboard/users 경로에서는 users/index.vue가 렌더링됩니다.

 

동적 중첩 라우트 적용하기

만약 /dashboard/users/123처럼 특정 사용자의 프로필을 표시하려면 동적 라우트를 사용해야 합니다.

<!-- pages/dashboard/users/[id].vue -->
<template>
  <div>
    <h1>사용자 정보: {{ $route.params.id }}</h1>
  </div>
</template>

• /dashboard/users/123에 접근하면 "사용자 정보: 123"이 출력됩니다.
• :id 부분은 동적 라우트 파라미터를 받아서 처리할 수 있습니다.

캐치올(Catch-All) 라우트 적용

만약 /blog/foo/bar/baz처럼 깊이 있는 동적 URL을 처리하고 싶다면, 캐치올 라우트(Catch-All Route) 를 사용할 수 있습니다.

<!-- pages/blog/[...slug].vue -->
<template>
  <div>
    <h1>블로그 페이지</h1>
    <p>경로: {{ $route.params.slug }}</p>
  </div>
</template>

• /blog/foo/bar → slug 값은 ['foo', 'bar']
• /blog/some-post → slug 값은 ['some-post']

이 방식은 다중 동적 경로를 처리할 때 유용합니다.