参考资料：vue-router官方文档 （https://router.vuejs.org/zh/guide/）
一、动态路由匹配
1.如果经常需要把某种模式匹配到的所有路由全部映射到同个组件，那么可以用动态路径参数来达到这个效果。
2.动态路径：{path:'/user/:id/profile',component:User} ，可以用$route.params.id来取参。
3.动态路径跟path:'/user?id=12' 有多大的差别？觉得差不多。
4.路由参数的变化，如果从'/user/12'到'/user/14'，组件User会被复用，生命周期钩子不会再被调用，需要通过"watch对象$route"或者导航守卫beforRouteUpdate()来监测路由参数的变化。那如果从'/user/12'到'/play/14'再到'/user/14'，组件User会被复用吗？
二、编程式导航
router.push()、router.replace()、router.go()
replace几乎没用过
三、命名路由
用命名视图和直接放组件本身有什么差别？感觉没有
四、重定向和别名
routes:[{path:'/a',redirect:'/b'}，{path:'/a',alias:'/b'}]
重定向：当用户访问'/a'时，会直接到'/b';访问'/b',还是到'/b'
别名：当用户访问'/a'时，还是到'/a';访问'/b',会直接到'/a'
别名功能可以让我们自由将UI结构映射到任意的URL。
五、路由组件传参
使用$route.params可以将参数传递给组件，但如果在组件中使用$route.params来获取参数，会让组件和$route高度耦合，使组件只能在某些特定的URL上使用，限制了其灵活性。
可以使用props将组件和路由解耦，在组件中可以按props的格式获取到参数。
是不是也可以使用正常的props方式给这个组件传参？是的，这也应该就是用props解耦的目的。
用法：
1.布尔模式：将props属性直接设置为true,route.params就会被设置成组件属性
{path:'/user/:id',component:User,props:true}
2.对象模式
{path:'/promotion/from-newsletter',component:Promotion,props:{newsletterPopup:false}}
3.函数模式
{path:'/search',component:SearchUser,props:(route)=>({query:route.query.q})}
六、HTML5 History模式
使用history模式时，需要后端配置支持，在服务端增加一个覆盖所有情况的候选资源，如果URL匹配不到任何静态资源，也应该返回index.html。
这么做了之后，服务器就不再返回404错误页面了。为了判断是否是404，应该在router中覆盖所有路由的情况，然后再给出一个404页面。
routes:[{path:'*',component:NotFoundComponent}，{path:'/home',component:Home}]
不需要将404放在最后。检测原理应该是遍历（除*的之外）其他所有路径，如果都不匹配，则匹配上*。
七、导航守卫
1.全局路由守卫
router.beforeEach() 可以用来：检查全局用户信息是否获取、权限
参数:
to:即将进入的路由
from:正要离开的路由
next:一定要调用next方法来resolve这个钩子，不然会一直在等待中，页面不会跳转
next():进行管道中的下一个钩子
next(false):中断当前的跳转，重置到from的地址
next({path:'/'}):跳转到一个不同的地址，可以设置replace:true的属性
next(error):如果传入next的参数是一个Error实例，那么导航被终止，且错误被传递给router.onError()注册过的回调
2.路由独享守卫
beforeEnter(to,from,next)
3.组件内的守卫
beforeRouteEnter:不能直接获取组件实例this ，但是可以在next中通过vm来访问组件实例 next(vm => { })
beforRouteUpdate:to和from路径渲染同一个组件时会被触发，可以访问组件实例this
beforeRouteLeave:导航离开该组件对应的路由时调用，可以访问组件实例
4.完整的导航解析流程
导航被触发
在失活的组件里调用离开守卫
调用全局的beforeEach守卫
在重用的组件里调用beforeRouteUpdate
在路由配置里调用beforeEnter
解析异步路由组件
在被激活的组件里调用beforeRouteEnter
调用全局的beforeResolve守卫
导航被确认
调用全局的afterEach
触发DOM更新
用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数
八、路由元信息
meta字段，'{path:'bar' , component:Bar, meta:{ requiresAuth:true}}'
如果路由是嵌套的，一个URL可能会匹配多个路由记录（父、子），匹配记录会在route.matched数组中。可以给每个路由记录的meta里设置titile属性，然后通过route.matched组合出导航栏的面包屑。
单个路由记录的meta属性可以直接通过route.meta取得。
九、数据获取
进入某个路由后，需要从服务器获取数据，可以用两种方式实现。一个是，先完成导航，然后在后面的组件的生命周期钩子中获取数据，在数据获取期间显示加载中的提示。另一个是，在导航完成之前，在路由守卫中获取数据，获取成功之后再执行导航，在获取数据的过程中最好也给一些提示。两种方法相差不大，只看你想要哪种方式。
十、滚动行为
vue-router可以定义路由切换之后，页面是滚动到顶部还是保持原先的位置。该功能只在支持history的浏览器中可用。
routes:[],
scrollBehavior(to,from,savedPosition){
//return 期望滚动到哪个位置 。比如：{ x: number, y: number }，或savedPosition，或{ selector: string, offset? : { x: number, y: number }}。
}
参数savedPosition 当且仅当popstate导航(通过浏览器的前进/后退 按钮触发)时才可用。
如果返回savedPosition，在按下前进/后退按钮时，会像浏览器的原生表现那样。
如果返回falsy或者空对象，那么不会发生滚动。
还可以滚动到锚点，return { selector: to.hash}
十一、路由懒加载
当项目过大时，JavaScript包会很大，会影响页面的加载速度。如果能够把不同路由对应的组件分割成不同的代码分别打包，然后在路由被访问时才加载对应的组件，这样就会更加高效，这就是路由懒加载。
路由懒加载的三种实现方式：
1.vue异步组件写法
{path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) }
2.ES中的import写法
const Home = () => import('@/components/home')
3.webpack里提供的require.ensure()
{ path: '/home', name: 'home', component: resolve => require.ensure([], () => resolve(require('@/components/home')), 'demo') },
