[콜럼Vue스] 중첩라우트

중첩 라우트는 Vue Router에서 다중 뷰 또는 중첩된 컴포넌트 구조를 지원하는 기능을 말함.

즉, 부모 라우트의 컴포넌트 안에 자식 라우트를 정의하여, 하나의 페이지에서 여러 개의 컴포넌트를 계층적으로 관리할 수 있게 해줌.

중첩 라우트 설정 방법

중첩 라우트를 구현하기 위해서는 부모 라우트의 component에 라우트 아울렛(router-view)을 설정하고, 자식 라우트들을 children 속성에 정의해야 함.

 

기본 구조

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
]

 

• /parent 경로가 부모 라우트이고, /parent/child 경로가 자식 라우트임.
• 부모 컴포넌트 안에 자식 컴포넌트가 중첩되어 표시됨.

부모 컴포넌트 (ParentComponent.vue)

부모 컴포넌트에서는 <router-view>를 사용하여 자식 컴포넌트를 렌더링할 위치를 정의함.

<template>
  <div>
    <h1>부모 컴포넌트</h1>
    <router-view></router-view> <!-- 자식 라우트를 렌더링 -->
  </div>
</template>

<script>
export default {
  name: 'ParentComponent'
}
</script>

자식 컴포넌트 (ChildComponent.vue)

자식 컴포넌트는 부모 컴포넌트의 <router-view>에서 렌더링됨.

<template>
  <div>
    <h2>자식 컴포넌트</h2>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent'
}
</script>

중첩 라우트 경로

중첩 라우트는 부모 경로에 자식 경로를 이어서 접근함. 예를 들어, 위의 예시에서는 /parent 경로로 부모 컴포넌트가 표시되고, /parent/child 경로로 자식 컴포넌트가 부모 컴포넌트 내의 <router-view>에서 렌더링됨.

중첩 라우트 예시

const routes = [
  {
    path: '/dashboard',
    component: DashboardComponent,
    children: [
      {
        path: 'stats',      // /dashboard/stats 경로
        component: StatsComponent
      },
      {
        path: 'settings',   // /dashboard/settings 경로
        component: SettingsComponent
      }
    ]
  }
]

이 예시에서는 /dashboard 경로에서 DashboardComponent가 렌더링되고, /dashboard/stats로 접근하면 StatsComponent, /dashboard/settings로 접근하면 SettingsComponent가 렌더링됨.

 

path 속성의 슬래시 주의

자식 라우트의 path는 부모 라우트의 path에 상대적인 경로로 설정해야 함. 만약 자식 라우트의 path가 /로 시작되면 루트 경로로 인식되므로, 중첩 라우트로서 동작하지 않음.

잘못된 설정 예시 :

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: '/child',  // 잘못된 설정: 절대 경로로 인식됨
        component: ChildComponent
      }
    ]
  }
]

이렇게 하면 /child로만 접근이 가능하며, /parent/child로 접근이 불가능해짐.

 

중첩된 router-view

중첩 라우트는 여러 단계로 중첩될 수 있음. 이때 부모, 자식 컴포넌트 모두 **<router-view>**를 포함하여, 하위 경로의 컴포넌트들이 차례로 렌더링되도록 할 수 있음.

2단계 중첩 라우트 예시

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    children: [
      {
        path: 'users',
        component: UsersComponent,
        children: [
          {
            path: 'profile',
            component: UserProfileComponent
          }
        ]
      }
    ]
  }
]

 

• /admin: AdminComponent 렌더링
• /admin/users: UsersComponent가 AdminComponent 안에 렌더링됨
• /admin/users/profile: UserProfileComponent가 UsersComponent 안에 렌더링됨

중첩된 router-view 예시

<!-- AdminComponent.vue -->
<template>
  <div>
    <h1>Admin 페이지</h1>
    <router-view></router-view> <!-- UsersComponent가 렌더링될 위치 -->
  </div>
</template>

 

<!-- UsersComponent.vue -->
<template>
  <div>
    <h2>Users 페이지</h2>
    <router-view></router-view> <!-- UserProfileComponent가 렌더링될 위치 -->
  </div>
</template>