1. 动态匹配路由的基本用法
思考：
<!– 有如下 3 个路由链接 -->
<router-link to="/user/1">User1</router-link>
<router-link to="/user/2">User2</router-link>
<router-link to="/user/3">User3</router-link>
// 定义如下三个对应的路由规则，是否可行？？？
{ path: '/user/1', component: User }
{ path: '/user/2', component: User }
{ path: '/user/3', component: User } 虽然以上规则可以匹配成功，但是这样写比较麻烦。如果有100个规则，那么写起来就会非常的麻烦。
通过观察，可以发现整个路由规则中只有后续的数字是在变化的。所以这里可以通过动态路由参数的模式进行路由匹配。
var router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ]
})
const User = { // 路由组件中通过$route.params获取路由参数 template: '<div>User {
{ $route.params.id }}</div>'
}具体代码实现如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!-- 导入 vue 文件 --><script src="./lib/vue_2.5.22.js"></script><script src="./lib/vue-router_3.0.2.js"></script></head><body><!-- 被 vm 实例所控制的区域 --><div id="app"><router-link to="/user/1">User1</router-link><router-link to="/user/2">User2</router-link><router-link to="/user/3">User3</router-link><router-link to="/register">Register</router-link>
?<!-- 路由占位符 --><router-view></router-view></div>
?<script>const User = {template: '<h1>User 组件 -- 用户id为: {
{$route.params.id}}</h1>'}
?const Register = {template: '<h1>Register 组件</h1>'}
?// 创建路由实例对象const router = new VueRouter({// 所有的路由规则routes: [{ path: '/', redirect: '/user'},{ path: '/user/:id', component: User },{ path: '/register', component: Register }]})
?// 创建 vm 实例对象const vm = new Vue({// 指定控制的区域el: '#app',data: {},// 挂载路由实例对象// router: routerrouter})</script></body>
</html>?