我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在router的路由路径中使用“动态路径参数”来达到这个效果：
const User = { template: '<div>User {{ this.$route.params.id }}</div>', watch: { '$route'(to, from) { console.log(to, from) } } } const router = new VueRouter({ routes: [ {path: '/user/:id', component: User} ] })现在呢，像/user/foo和/user/bar都将映射到相同的路由。
一个“路径参数”使用冒号：标记。当匹配到一个路由时，参数会被设置到this.$route.params，可以在每个组件内使用。于是，我们可以更新User的模板，输出当前用户的ID。
有时候，同一个路由可以匹配到多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义，谁的优先级就高。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TEST-VUE案例</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <ul> <li> <router-link to="/user/foo"> Go to Foo </router-link> </li> <li> <router-link to="/user/bar"> Go to Bar </router-link> </li> </ul> <router-view></router-view> </div> <script> const User = { template: '<div>User {{ this.$route.params.id }}</div>', watch: { '$route'(to, from) { console.log(to, from) } } } const router = new VueRouter({ routes: [ {path: '/user/:id', component: User} ] }) const app = new Vue({ router: router }).$mount('#app') </script> </body> </html>
