[vue-router] 라우터 컴포넌트에 props 전달

컴포넌트에서 $route를 사용하게 되면, 컴포넌트가 URL에 의족적이게 되어 재사용성이 떨어지게 됩니다. 이 의존성을 제거하기 위해서는 props 옵션을 사용하면 됩니다,

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

위의 코드는 $route를 사용한 예제입니다. URL에 의존적이기 때문에 다른 URL를 가지는 컴포넌트에서 재사용하기 어렵습니다.

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // for routes with named views, you have to define the `props` option for each named view:
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

위의 코드는 props 옵션을 사용한 예제입니다. URL대한 의존성이 제거되기 때문에 코드 재사용이나 테스트하기 쉽습니다.
Named views를 사용할 때는 각각의 named view에 props 옵션을 설정해 주어야 합니다.

1. Boolean mode

props에 true를 설정하면, route.params가 컴포넌트의 props에 설정됩니다.

2. Object mode

props가 object가 될 수 있습니다. props에 설정된 값은 컴포넌트의 props가 됩니다.

const router = new VueRouter({
  routes: [
    { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  ]
})

이 모드는 정적인 props를 설정할 때 유용합니다.

3. Function mode

props를 함수로 작성 할 수도 있습니다. route의 값을 임의대로 컴포넌트의 props로 설정 할 수 있습니다.

const router = new VueRouter({
  routes: [
    { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  ]
})

위의 코드를 예로 들어 이야기 하면, /search?q=vue 라는 URL로 접속하게 되면, SearchUser 컴포넌트의 props는 { query: 'vue' }가 됩니다.
props를 함수로 만들 때 유의 사항 중 한가지는 route가 변경되었을 때 호출 되는 함수이기 때문에 이 함수에서 state를 저장하면 안된다는 것입니다.

참고

• https://router.vuejs.org/guide/essentials/passing-props.html#object-mode