Vue-router 속성 전달

속성 전달

컴포넌트에서$route를 사용하게 되면, 컴포넌트가 url에만 의족적이게 되어 재사용성이 떨어진다.

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

이 의존성을 제거하기 위해서 props 옵션(속성 전달)을 사용한다.

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, **props: true** },
  ]
})

Boolean 모드

props를 true로 설정하면 route.params가 컴포넌트 props로 설정된다.

객체 모드

props가 객체일때 컴포넌트 props가 있는 그대로 설정된다. props가 정적일 때 유용하다.

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

함수 모드

props를 반환하는 함수를 만들 수 있다.
이를 통해 전달인자를 다른 타입으로 캐스팅하고 적정인 값을 라우트 기반 값과 결합된다.

/search?q=vue는 {query: "vue"}를 SearchUser 컴포넌트에 전달한다.

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

props를 함수로 만들 때 유의해야 할 것은 route가 변경되었을 때 호출 되는 함수이기 때문에 이 함수에서 state를 저장하면 안 된다.
props를 정의할 상태가 필요한 경우 래퍼 컴포넌트를 사용하면 상태가 변경될 때마다 응답할 수 있다.