持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第15天，点击查看活动详情juejin.cn/post/714765…
vue完整的导航解析流程
- 导航被触发
- 在失活的组件里调用beforRouteLeave守卫。
- 调用全局的beforeEach守卫。
- 在重用的组件里调用beforeRouteUpdate守卫（重复点击了一个组件）
- 在路由配置里调用beforeEnter
- 解析异步路由组件
- 在被激活的组件里调用beforeRouteEnter
- 调用全局的beforeResolve守卫
- 导航被确认
- 调用全局的afterEach钩子
- 触发DOM更新
- 调用beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入。
路由元信息
就是在router路由配置一个属性meta（里面放一些权限，路由访问权限）。示例：
如何访问meta字段
我们称呼routes配置中的每个路由对象为路由记录。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录。一个路由匹配到的所有路由记录会暴露㘝route.matched数组。因此，我们需要遍历$route.matched来检查路由记录中的meta字段。
下面例子展示在全局导航守卫中检查元字段：
组件内设置meta字段，通过独享守卫来检查元字段：
数据获取
有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据，我们可以通过两种方式来实现：
导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的提示
导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
导航完成之后获取
当你使用这种方式时，我们会马上导航he渲染组件，然后在组件的created钩子中获取数据。这让我们有机会在数据获取旗舰展示一个loading状态，还可以在不同视图间展示不同的loading状态。假设我们有一个Post组件，需要基于$route.params.id获取文章数据：
导航完成之前获取
通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的beforeRouteEnter守卫中获取数据，当数据获取成功后只调用next方法
过渡动效
在你的路径组件上使用转场，并对导航进行动画处理
单个路由的过渡：
基于路由的动态过渡：
滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router能做到，而且更好，它可以让你自定义路由切换时页面如何滚动
注意：这个功能只在支持history.pushState的浏览器中可用。
当创建一个router实例，你可以提供一个scrollBehavior方法：
scrollBehavior方法接收to和from路由对象。第三个参数savedPosition当且仅当popstate导航（通过浏览器的前进/后退按钮触发）时才可用。
这个方法返回滚动位置的对象信息，如下：
如果返回一个falsy的值，或者是一个空对象，那么不是发生滚动。
还可以通过hash来跳转到锚点位置：
路由懒加载
当打包构建应用是，js包会变得非常大，影响页面加载，如果我们能把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
结合vue的异步组件和webpack的代码分割功能，轻松实现路由组件的懒加载。
首先，可以将异步组件定义为返回一个Promise的工厂函数（该函数返回的Promise应该resolve组件本身）
第二，在webpack2中，我们可以使用动态import（opens new window）语法来定义代码分块点。
