VueRouter源码解析(四)：业务中使用VueRouter的一些思考下午在写路由跳转的时候用router.push方

下午在写路由跳转的时候用router.push方法，该方法是返回一个promise实例。

那么就翻开源码看一看

原来push方法是可以传入三个参数的，如果没有指定的后两个回调函数，就返回一个promise。

那么就涉及到resolve与reject是何时被调用的问题了，接着查看代码(hash模式为例)发现，就是传入了transitionTo的方法。

再细化一下执行顺序，在导航确认的过程中，是路由先发生改变，然后触发视图渲染。而紧接着触发之后会立即决议promise。onResolved状态下返回route对象。

nextTick

这里再啰嗦一下完整的导航解析流程中为什么DOM更新是在所有的导航都被触发之后的。因为 $route的值与组件的渲染watcher有依赖关系，因此$ route更该的时候，触发了渲染watcher重新执行，而渲染watcher会被push到更新队列中。该更新动作会被nextTick函数存入一个全局数组中。

因此这轮的tick中只有触发导航守卫，而不会触发视图更新。另外，在组件内的守卫beforeRouteEnter中我们可以取到其组件实例。也是因为使用了nextTick函数，以保证守卫获取到的实例是更新后的实例。

最后

长期更新.....，会把在开发中想到的一些东西或者遇到的有关路由的困难汇总在此篇文章中。

事件循环与Vue的异步更新(代码注释)：juejin.cn/post/685703…

Vue中的watcher之渲染 watcher和users watcher: juejin.cn/post/685750…