중첩된 라우트

일부 앱의 UI는 여러 단계로 중첩된 컴포넌트로 구성된다

이 경우, URL 세그먼트가 중첩된 컴포넌트 중 특정 구조와 일치되어야 하는 것을 매우 일반적임

예시

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

 

Vue Router를 사용하는 경우, 중첩된 라우트 구성을 통해 이러한 구조적 관계를 구현할 수 있음

 

<!-- App.vue -->
<template>
  <router-view />
</template>

<!-- User.vue -->
<template>
  <div>
    User {{ route.params.id }}
  </div>
</template>

// composition 은 useRoute() 를 사용

import User from './User.vue'

// 이것은 `createRouter`로 전달됨
const routes = [{ path: '/user/:id', component: UserView }]

 

여기서 route-view 는 최상위 route-view 임, 최상위 라우트와 일치하는 컴포넌트를 렌더링함

마찬가지로 렌더링된 컴포넌트는 자체 중첩된 router-view 를 포함할 수도 있음

 

UserView 컴포넌트의 템플릿 내부에 router-view 를 하나 추가한다면

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

 

/user/:id 내부의 모든 라우트에 children 옵션을 사용해야함

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      {
        // /user/:id/profile 와 매치된 경우,
        // User 컴포넌트 내부의 <router-view>에서 렌더링됨: UserProfile
        path: 'profile',
        component: UserProfile,
      },
      {
        // /user/:id/posts 와 매치된 경우,
        // User 컴포넌트 내부의 <router-view>에서 렌더링됨: UserPosts
        path: 'posts',
        component: UserPosts,
      },
    ],
  },
]

 

만약 /user/hhh 로 접근하면 일치하는 중첩 라우트가 없으므로 내부의 router view 에 아무것도 렌더링 되지 않음

-> 다른것을 띄우고 싶을 때 

const routes = [
  {
    path: '/user/:id',
    component: User,
    children: [
      // /user/:id 와 매치된 경우,
      // User 컴포넌트 내부의 <router-view>에서 렌더링됨: UserHome
      { path: '', component: UserHome },

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

---

중첩된 이름이 있는 라우트

이름이 있는 라우트를 처리할 때, 일반적으로 자식 라우트의 이름만 지정

const routes = [
  {
    path: '/user/:id',
    component: User,
    // 자식 라우트에만 이름이 있음.
    children: [{ path: '', name: 'user', component: UserHome }],
  },
]

이렇게 하면 /user/:id 로 이동하면 항상 중첩 라우트가 표시됨

 

일부 시나리오에서는 중첩 라우트로 이동하지 않고 이름이 있는 라우트로 이동하고자 할 수 있음

예를 들어 중첩된 이름이 있는 라우트 (위 예저의 name:user 라우트) 를 표시하지 않고 /user/:id로 이동하려는 경우

-> 중첩을 표시하지 않고 이동

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

 

---

 

부모 컴포넌트 생략

 

라우트 컴포넌트를 중첩할 필요 없이 라우트 간의 부모-자신 관계를 활용할 수도 있음

공통 라우트 접두어를 가진 라우트를 그룹화하거나, 라우트별 탐색 가드나 라우트 메타 필드와 같은 고급 기능을 사용할 때 유용

 

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