vue之router学习笔记

1、动态路由匹配

我们经常需要将具有给定模式的路线映射到同一个组件。例如，我们可能有一个User应该为所有用户呈现但具有不同用户ID的组件。在vue-router我们可以在路径中使用动态段以实现：

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

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})

现在，URL /user/foo和/user/bar将映射到相同的路由。

动态段由冒号表示:。匹配路径时，动态段的值将this.$route.params在每个组件中公开。因此，我们可以通过更新User模板来呈现当前用户ID ：