用法：
- 在url中，通过定义参数，那么以后url中就可以动态的传递这些参数。语法：`/our/:参数名`
let router = new VueRouter({ routes: [ { // user为参数 path: "/our/:user", component: our } ] })
2. 在组件中，可以通过`this.$route.params.参数名`拿到；在组件的模板中可以通过`$route.params.参数名`拿到。
var our = Vue.extend({ template: "<h1>欢迎,{{$route.params.user}}</h1>" })
`this.$route`和`this.$router`的区别：
1、`this.$route`：代表的是当前这个路由里的一些信息，如：`params`、`query`、`fullPath`等
2、`this.$router`：代表的是全局`VueRouter`对象。
整体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>VueRouter-动态路由</title> </head> <body> <div id="app"> <ul> <li> <router-link to="/">首页</router-link> </li> <li> <router-link to="/our/Xsan">我们</router-link> </router-link> </li> </ul> <router-view></router-view> </div> <script> var index = Vue.extend({ template: "<h1>首页</h1>" }) var our = Vue.extend({ template: "<h1>欢迎,{{$route.params.user}}</h1>" }) let router = new VueRouter({ routes: [{ path: "/", component: index }, { path: "/our/:user", component: our } ] }) new Vue({ el: "#app", router: router, data: { } }) </script> </body> </html>