vue router

아래와 같이 표시될 경우 /user/foo 와 /user/bar 같은 url은 모두 같은 경로에 매핑됩니다.

동적 세그먼트는 콜론 : 으로 표시됩니다. 라우트가 일치하면 동적 세그먼트의 값은 모든 컴포넌트에서 this.$route.params로 인식하게 됩니다. foo가 들어오면 this.$route.params은 foo가 되는 것입니다.

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 동적 세그먼트는 콜론으로 시작합니다.
    { path: '/user/:id', component: User }
  ]
})

따라서 다음과 같이 사용자의 id를 표시할 수 있습니다.

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}