VueRouter의 Nested Route 파헤치기

Nested Route(중첩된 라우트)

이전 게시글에서 우리는 <router-view>를 사용해 보았습니다.
Vue Router에서는 route를 중첩해서 사용 할 수 있습니다.
이게 무슨말이냐??

Vue를 공부하면서 부모-자식 관계를 지겹도록 들었을 겁니다.

맞습니다. <router-view>도 부모-자식 처럼 사용하는 것이죠.
음... 일종의 <iframe>을 상상해 보시죠.
우리는 컴포넌트를 삽입하는 거지만, 얼추 그런 느낌이란 뜻입니다. 다른 겁니다.

예시를 보면서 이해해 보도록 합시다. 몇가지 컴포넌트를 만들어 봅시다.

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

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

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

import User from './User.vue'

const routes = [{ path: '/user/:id', component: User }]

 

기본적으로 사용하던 모양에서 route설정 속성에 children속성을 이용해 자식을 만들어 줄 수 있습니다. 그러면 URL뒤에 가산되는 방식으로 동작합니다.

 

예를 들어보겠습니다.

const routes = [
    {
        path: '/user/:id',
        component: User,
        children: [
            {
                path: 'profile',
                component: UserProfile,
            },
            {
                path: 'posts',
                component: UserPosts,
            },
        ],
    },
]

 

위의 코드에서 UserProfile.vue의 컴포넌트를 호출하려면 /user/:id/profile로 동작하는 의미입니다.

이해가 되셨나요??

 

그럼 원점으로 돌아와 중첩된 라우트를 다시 알아보겠습니다.
위에서 작성한 User.vue에서 <router-view>를 추가하겠습니다.

 

맞습니다... 이게 전부입니다...

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

 

이렇게 작성하면 부모가 되는 App.vue에 User.vue컴포넌트가 삽입되고 /profile을 추가적으로 붙여주게 되면 User.vue의 <router-view>태그 부분에 UserProfile.vue컴포넌트가 삽입되어 화면에 표시되게 됩니다.

우리는 레이아웃을 생성하고 해당 레이아웃 안에 컴포넌트를 삽입하는 형태로 사용하고 있습니다. 이와 같은 방법은 레이아웃 안에 새로운 레이아웃에 컴포넌트를 삽입하는 방법이라고 생각하시면 됩니다.

 

음... Spring에서 thymeleaf를 예로 든다면 th:include를 중첩해서 사용하는 것이라고 할 수 있겠네요. ㅎㅎ

Nested Route 중 이름이 있는 라우트

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

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

 

일부 시나리오에서는 충첩 라우트로 이동하지 않고, 이름이 있는 라우트로 이동하고자 할 수 있습니다. 그럴경우 부모에게 name을 지정해서 이동하면 되겠지요.

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

 

위와같이 설정하면 router로 호출할 때, name값으로 user-parent를 사용한다면, User.vue컴포넌트를 호출하게 됩니다. 또한, 하위에 있는 <router-view>태그에서 children속성의 자식 컴포넌트를 호출하지 않게 됩니다.

Nested Route 중 부모 컴포넌트 생략

children속성을 이용하면 부모 component속성을 선언하지 않고도 사용 할 수 있습니다.

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

 

부가적인 설명이 필요없겠죠??