一、动态路由匹配
形如：
const router = new VueRouter({ routes: [{ path: '/user/:id', component: User } ] })
后面的值就是动态匹配的参数，真正的路由值跳转到冒号之前的路径中，：后的值在this.$route.params中，可以在任意组件中被使用。
当只有：后的参数改变的时候，原来的组件实例会被复用，意味着组建的生命周期不会再被调用
如果此时想要对参数的变化做出响应，可以watch$router
二、编程式导航
在vue实例内部，可以通过$router访问路由实例,可以通过this.$push(...)俩进行页面跳转
跳转有两种方式：
声明式跳转：<router-link :to="...">；
编程式跳转：router.push(...)
参数可以是一个path路径，也可以包括params和query参数
router.push({ name: 'user', params: { userId: '123' }})
router.push({ path: 'register', query: { plan: 'private' }})
注意：如果提供path，则params会被覆盖，可以用以下两种方式替代
router.push({ name: 'user', params: { userId }}) // -> /user/123 router.push({ path:
/user/${userId}}) // -> /user/123
router.replace和router.push区别：
push是向前推进一个页面（真正意义上的跳转，后退会返回当前页面），replace是替换当前页面（后退会返回当前页面的上一级）
router的API大体上和window.history很像，可以参考理解
三、路由优先级
当一个路由可以匹配多个路由的时候，此时，匹配的优先级俺找路由的定义标准，谁先定义的，谁的优先级就越高
四、路由嵌套
路由通常由：路由实例，路由表，components组成，在项目中这几部分可以按照需求进行拆分，从而有更清晰的结构，当我们需要在同级展示多个视图的时候，我们需要为router-view设置名字
当路由需要进行嵌套的时候，只需要在路由表的顶级路由中嵌套子路由即可，如下
{ path: '/settings', component: UserSettings,
children: [
{ path: 'emails', component: UserEmailsSubscriptions },
{ path: 'profile', components:
{ default: UserProfile, helper: UserProfilePreview }
}] }
渲染时：
<div> <h1>User Settings</h1> <NavBar/> <router-view/> <router-view name="helper"/> </div>
五、路由重定向
有时我们需要多个路径指向同一个视图，这时候就需要用到路由的重定向，一般在路由表的path后加一个redirect属性就可以做到
参数可以是相对路径：
const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] })
也可以是命名路由
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })
也可以是一个方法
const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 }} ] })
路由重定向和路由别名的区别：
重定向是先访问到/a，然后路由会把页面重定向到/b，跳转了两次；别名是直接跳转到对应url，只经历一次跳转
六、路由组件传参
有时我们在进行路由跳转的时候，不可避免的会遇到需要传递参数的情况，这时候就需要利用路由进行传参，但在之前我们的参数都是通过$router.params来进行传递的，这样就造成了组件和URL过于耦合，组件只能在特定的url上使用，所以这时候我们就需要引入props进行解绑
const User = { props: ['id'], template: '<div>User {{ id }}</div>' }
const router = new VueRouter({
routes: [ { path: '/user/:id',
component: User, props: true },
// 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
{ path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false } } ] })
七、路由守卫
路由守卫顾名思义，就是在路由进行跳转之前或之后进行的判断，参数或查询的改变并不会触发进入/离开的导航守卫，
它一般分为：全局
单个路由独享
组件
每个守卫方法都有三个参数
- to: Route: 即将要进入的目标 路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子
通常情况下登录路由守卫
