중첩 라우트

일부 애플리케이션의 UI는 여러 단계로 깊게 중첩된 컴포넌트들로 구성됩니다. 이 경우 URL의 세그먼트가 특정한 중첩 컴포넌트 구조와 대응하는 일이 매우 흔합니다. 예를 들면 다음과 같습니다:

/user/johnny/profile                   /user/johnny/posts
┌──────────────────┐                  ┌──────────────────┐
│ User             │                  │ User             │
│ ┌──────────────┐ │                  │ ┌──────────────┐ │
│ │ Profile      │ │  ────────────>   │ │ Posts        │ │
│ │              │ │                  │ │              │ │
│ └──────────────┘ │                  │ └──────────────┘ │
└──────────────────┘                  └──────────────────┘

Vue Router에서는 중첩 라우트 구성을 사용해 이런 관계를 표현할 수 있습니다.

이전 장에서 만든 앱을 예로 들면:

vue

<template>
  <router-view />
</template>

vue

<template>
  <div>User {{ $route.params.id }}</div>
</template>

import User from './User.vue'

// 이것들은 `createRouter`에 전달됩니다
const routes = [{ path: '/user/:id', component: User }]

여기 있는 <router-view>는 최상위 router-view입니다. 최상위 라우트에 매치된 컴포넌트를 렌더링합니다. 마찬가지로 렌더링된 컴포넌트 안에도 자체 중첩 <router-view>를 둘 수 있습니다. 예를 들어 User 컴포넌트 템플릿 안에 하나를 추가하면:

vue

<template>
  <div class="user">
    <h2>User {{ $route.params.id }}</h2>
    <router-view />
  </div>
</template>

이 중첩 router-view 안에 컴포넌트를 렌더링하려면 라우트 중 하나에서 children 옵션을 사용해야 합니다:

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // /user/:id/profile이 매치되면
        // UserProfile이 User의 <router-view> 안에 렌더링됩니다
        path: 'profile',
        component: UserProfile,
      },
      {
        // /user/:id/posts가 매치되면
        // UserPosts가 User의 <router-view> 안에 렌더링됩니다
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

/로 시작하는 중첩 경로는 루트 경로로 취급된다는 점에 유의하세요. 이를 통해 중첩 URL을 사용하지 않고도 컴포넌트 중첩 구조를 활용할 수 있습니다.

보시다시피 children 옵션은 routes 자체와 마찬가지인 또 하나의 라우트 배열일 뿐입니다. 따라서 필요한 만큼 계속해서 뷰를 중첩할 수 있습니다.

이 시점에서 위 구성으로 /user/eduardo에 방문하면 중첩 라우트가 매치되지 않으므로 User의 router-view 안에는 아무것도 렌더링되지 않습니다. 거기에 무언가를 렌더링하고 싶을 수도 있습니다. 그런 경우에는 비어 있는 중첩 경로를 제공하면 됩니다:

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      // /user/:id가 매치되면
      // UserHome이 User의 <router-view> 안에 렌더링됩니다
      { path: '', component: UserHome },

      // ...다른 하위 라우트
    ],
  },
]

이 예제의 동작하는 데모는 여기에서 확인할 수 있습니다.

중첩된 이름 있는 라우트

이름 있는 라우트를 다룰 때는 보통 자식 라우트에 이름을 부여합니다:

const routes = [
  {
    path: '/user/:id',
    component: User,
    // 자식 라우트에만 이름이 있다는 점에 주목하세요
    children: [{ path: '', name: 'user', component: UserHome }],
  },
]

이렇게 하면 /user/:id로 이동할 때 항상 중첩 라우트가 표시됩니다.

어떤 시나리오에서는 중첩 라우트로 이동하지 않고 이름 있는 라우트로 이동하고 싶을 수 있습니다. 예를 들어 중첩 라우트를 표시하지 않은 채 /user/:id로 이동하고 싶을 수 있습니다. 이런 경우 부모 라우트에도 추가로 이름을 붙일 수 있지만, 페이지를 다시 로드하면 항상 중첩 자식이 표시된다는 점에 유의하세요. 이는 이름 있는 라우트가 아니라 /users/:id 경로로의 내비게이션으로 간주되기 때문입니다:

const routes = [
  {
    path: '/user/:id',
    name: 'user-parent',
    component: User,
    children: [{ path: '', name: 'user', component: UserHome }],
  },
]

부모 컴포넌트 생략하기 4.1+

라우트 컴포넌트를 중첩하지 않고도 라우트 간 부모-자식 관계를 활용할 수 있습니다. 이는 공통 path prefix를 가진 라우트를 묶거나, 라우트별 내비게이션 가드, 라우트 meta 필드 같은 더 고급 기능을 사용할 때 유용할 수 있습니다.

이를 위해 부모 라우트에서 component와 components 옵션을 생략합니다:

const routes = [
  {
    path: '/admin',
    children: [
      { path: '', component: AdminOverview },
      { path: 'users', component: AdminUserList },
      { path: 'users/:id', component: AdminUserDetails },
    ],
  },
]

부모가 라우트 컴포넌트를 지정하지 않으므로, 최상위 <router-view>는 부모를 건너뛰고 대신 관련 자식의 컴포넌트를 사용합니다.

중첩 라우트 ​

중첩된 이름 있는 라우트 ​

부모 컴포넌트 생략하기 4.1+ ​

중첩 라우트

중첩된 이름 있는 라우트

부모 컴포넌트 생략하기 4.1+