[vue-router] Named Routes & Views

1. Named Routes

vue-router를 사용할 때, 이름이 있는 라우트를 사용하는 것이 더 편리할 때가 있습니다.

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

위의 코드와 같이 라우트를 설정하였다면,

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

혹은,

router.push({ name: 'user', params: { userId: 123 }})

를 이용하여 라우터를 변경 할 수 있습니다. 위의 두가지 모두 /user/123으로 경로를 이동합니다.

2. Named Views

여러개의 view를 중첩하지 않고 동시에 표시해야 할 경우, 이름을 갖는 view를 사용하면 편리합니다. 예를 들어,

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

위의 코드와 같이 어플리케이션이 구성되어 있다면, 첫번째 <router-view> 부터 차례로, Foo 컴포넌트, Bar 컴포넌트, Baz 컴포넌트가 렌더링됩니다. 이 때 반드시 vue-router의 components 옵션을 사용하여야 합니다.

중첩된 Named Views

물론 Named Views는 중첩되어 사용할 수 있습니다. 중첩하여 사용하기 위해서는 간단히 <router-view>를 중첩하여 사용하면 됩니다.

/settings/emails                                       /settings/profile
+-----------------------------------+                  +------------------------------+
| UserSettings                      |                  | UserSettings                 |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
| | Nav | UserEmailsSubscriptions | |  +------------>  | | Nav | UserProfile        | |
| |     +-------------------------+ |                  | |     +--------------------+ |
| |     |                         | |                  | |     | UserProfilePreview | |
| +-----+-------------------------+ |                  | +-----+--------------------+ |
+-----------------------------------+                  +------------------------------+

위의 그림의 구조를 보면, UserSettings 컴포넌트가 있고, UserSettings 컴포넌트는 Nav 컴포넌트를 항상 가지고 있고, UserEmailSubscriptions 컴포넌트 혹은 UserProfile 컴포넌트, UserProfilePreview 컴포넌트를 선택적으로 렌더링 해야 하는 구조입니다. 즉 UserEmailSubscriptions와 UserProfile, UserProfilePreview는 중첩된 view 컴포넌트 구조입니다.

<!-- UserSettings.vue -->
<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

{
  path: '/settings',
  // You could also have named views at the top
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

위의 코드와 같이 컴포넌트와 vue-router 설정을 하면 중첩된 Named View를 구현 할 수 있습니다.

참고

• https://router.vuejs.org/guide/essentials/named-routes.html
• https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views