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 :