Vue-router 学习

Vue Router

Vue Router的官方文档：https://router.vuejs.org/zh/

一、完整的导航解析流程

1、导航被触发。
2、在失活的组件里调用beforeRouteLeave守卫。
3、调用全局的beforeEach守卫。
4、在重用的组件里调用beforeRouteUpdate守卫（2.2+）。
5、在路由配置里调用beforeEnter守卫。
6、解析异步路由组件。
7、在新被激活的组件中调用beforeRouteEnter守卫。
8、调用全局的beforeResolve守卫（2.5+）。
9、导航被确认。
10、调用全局的afterEach钩子。
11、触发DOM更新。
12、用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数

二、进阶

1、路由元信息

一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组。
因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

2、过渡动效（可以与滚动行为一起）
3、数据获取

一种是“导航完成之后获取”：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
另一种是“导航完成之前获取”：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。
从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。

4、滚动行为（可以与过渡动效一起）
5、路由懒加载（提高性能、加快首页面加载时间）

三、注意事项

1、尽量使用props进行解耦
2、全局前置守卫beforeEach中确保调用next()方法，否则钩子就不会被resolved解析。