vue-router 源码分析——5.编程式导航

这是对vue-router 3 版本的源码分析。
本次分析会按以下方法进行：

1. 按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
2. 在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
3. 每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

本章讲解router中编程式导航是如何实现的。
另外我的vuex3源码分析也发布完了，欢迎大家学习：
vuex3 最全面最透彻的源码分析
还有vue-router的源码分析：
vue-router 源码分析——1. 路由匹配
vue-router 源码分析——2. router-link 组件是如何实现导航的
vue-router 源码分析——3. 动态路由匹配
vue-router 源码分析——4.嵌套路由

router.push(location, onComplete?, onAbort?)

1. 官网内容
   1 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
   2 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
   3.注意：如果提供了 path，params 会被忽略。
2. 通过下面对router.push方法的分析，发现router.push实际上是调用了一个名为 HashHistory 类的push方法，同时如果支持promise的话会返回一个promise。

// ./router.js
import {
    HashHistory } from './history/hash'
import {
    HTML5History } from './history/html5'
import {
    AbstractHistory } from './history/abstract'

export default class VueRouter {
   
    ...
    // 这里只看默认的hash-mode对应的内容
    history: HashHistory | HTML5History | AbstractHistory
    constructor(options: RouterOptions = {
    }) {
   
        ...
        switch(mode) {
   
            case 'hash':
                this.history = new HashHistory(this, options.base, this.fallback)
                break
        }
    }
    push(location: RawLocation, onComplete?: Function, onAbort?: Function)) {
   
        if (!onComplete && !onAbort && typeof Promise !== 'undefined') {
   
            // 以下对应官网的“此时如果支持 Promise，router.push 或 router.replace 将返回一个 Promise”
            return new Promise((resolve, reject) => {
   
                this.history.push(location, resolve, reject)            
            })        
        } else {
   
            this.history.push(location, onComplete, onAbort)        
        }
    }
}

3. 看HashHistory类是如何定义push方法的
   1 HashHistory.push实际上是调用了 History.transitionTo 方法，自身并没有做太多处理，接着看 History 类的代码。
   2.History.transitionTo 先通过调用 this.router.match 创建了一个新的路由对象（即跳转到的路由），然后调用了 confirmTransition 方法。调用了 confirmTransition 方法时的第二个参数，即onComplete，除了传入最开