相当于同一个组件，因为参数不同展示不同的组件内容，其实就是在 vue-router 的路由路径中使用『动态路径参数』
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
那么我们进入uesr/001 和 user/002 其实是进入的同一个路由，可以根据参数的不同在内容页展示不同的内容。一般适用场景：列表，权限控制
定义的时候用： 表示是动态路由
使用 {{ $route.params.id }} 来拿到本路由里面参数的内容
当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch（监测变化） $route 对象
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
嵌套路由
在路由里面嵌套一个路由
//路由里面也会出现 <router-view> 这是嵌套路由展示内容的地方
const User = {
template: `
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>
`
}
//定义路由的时候在 加children 子路由属性
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})
设置空路由，在没有指定路由的时候就会展示空路由内容
const router = new VueRouter({
routes: [
{
path: '/user/:id', component: User,
children: [
// 当 /user/:id 匹配成功，
// UserHome 会被渲染在 User 的 <router-view> 中
{ path: '', component: UserHome },
]
}
]
})
编程式导航
声明式：<router-link :to="...">
编程式：router.push(...)
可以想象编程式 push 可以理解为向浏览器历史里面push一个新的hash，导致路由发生变化