[Vue.js] vue-router #5 - Named

본 포스팅은, 뷰 라우터 공식 문서(https://router.vuejs.org/kr/guide/essentials/history-mode.html)와
'캡틴판교의 Cracking Vue.js' 내용에 기반하여 작성된 포스팅입니다.
자세한 내용은 공식 문서와 '캡틴판교의 Cracking Vue.js'를 참조해주세요!

1. Named Routes (이름을 가지는 라우트)

때로는 라우트에 연결하거나, 탐색을 수행할 때 Named Routes를 사용하는 것이 더 편리하다. Named Routes는 Router 인스턴스를 생성하는 동안 routes 옵션에 라우트를 지정할 수 있다.

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

이름을 가진 라우트에 링크하라면, 객체를 router-link, 컴포넌트의 to prop로 전달할 수 있다.

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

===

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

두 경우 모두 라우터는 /user/123 경로로 이동한다.

2. Named Views

때로는 여러 개의 뷰를 중첩하지 않고 동시에 표시해야 하는 경우가 있다. sidebar 뷰와 main뷰로 레이아웃을 생성한다.
이름이 지정된 뷰가 편리한 경우이다. 뷰에 하나의 outlet이 있는 대신 여러 개를 사용하여 각 outlet에 이름을 지정할 수 있다.
이름이 없는 router-view는 이름으로 default가 주어진다.

<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>

/*이 때, name이 지정되어 있지 않은 router-view에는 default가 매칭*/

...

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

뷰는 컴포넌트를 사용해 렌더링되므로 여러 뷰에는 동일한 라우트에 대한 여러 컴포넌트가 필요하다. (compnents옵션을 사용하면 된다.)