一、什么是hash路由

1、为地址栏中的 # 符号，比如这个 URL：http://www.abc.com/#/home，hash 的值为 #/home，请求的时候如果不特意加上，不会被带到服务器
2、hash刷新时，页面不会向服务器发送请求，因此改变 hash 不会重新加载页面。
3、每次hashchange的时候，利用window.onhashchange 监听，会在浏览器的访问历史中增加一个记录，所以可以通过浏览器的前进后退来管理页面。核心就是利用location.hash 和hashchange event去实现的前端路由跳转，同时链接上会有一个#号
具体的方法为：

// 在跳转后会得到跳转前和当前url
window.onhashchange = (e) => {
    console.log(e.oldUrl, e.newUrl);
}
// 这样就可以触发hashchange回调了
location.hash = '#test';

二、什么是history路由

1、是一个常规的链接，没有#符号
2、hisotry的请求在每次刷新都会向服务器去请求，除了pushState和replaceState
3、popState不能监听到pushState和replaceState的事件
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
4、刷新页面向服务器请求资源，资源不存在会404，服务器要兜底
5、pushState() 和 replaceState() 方法这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。执行后，页面的地址会变化，页面还是原来的页面不会发生变化。

三、两者的区别

1、hash路由链接有hash（#），并且是一个纯客户端路由（路由文件不需要通过nginx配置），history链接一般没hash，需要服务端进行兜底操作，否则页面会404（一般的处理方法是，在路由文件里配置找不到对应的路由时，统一跳转到404页面，这个配置放在路由文件的最后）
2、api不同，hash路由监听hashchange，history监听popstate，并且history有提供比较多api进行页面跳转管理，hash需要自己去管理这些堆栈

//当hash和history模式进行混用时
https://127.0.0.1/#/login?a=hello
hash: "#/login?a=hello"
search: ""

https://127.0.0.1/?a=hello#/login
hash: "#/login"
search: "?a=hello"

3、hash路由对seo不友好

四、解决方法

我们首先完成一个订阅-发布模式，然后重写history.pushState, history.replaceState,并添加消息通知，这样一来只要history的无法实现监听函数就被我们加上了事件通知，只不过这里用的不是浏览器原生事件，而是通过我们创建的event-bus 来实现通知，然后触发事件订阅函数的执行。
1、订阅-发布模式

class Dep { // 订阅池
      constructor(name) {
        this.subs = [] //该事件下被订阅对象的集合
      }
      defined(watch) {
        this.subs.push(watch)
      }
      notify() { //通知订阅者有变化
        console.log('this.subs',this.subs)
        this.subs.forEach((e, i) => {
          if (typeof e.update === 'function') {
            try {
              e.update.apply(e) //触发订阅者更新函数
            } catch (err) {
              console.error(err)
            }
          }
        })
      }
    }

    class Watch {
      constructor(name, fn) {
        this.name = name; //订阅消息的名称
        this.callBack = fn; //订阅消息发送改变时->订阅者执行的回调函数     
      }
      add(dep) { //将订阅者放入dep订阅池
        dep.subs.push(this);
      }
      update() { //将订阅者更新方法
        var cb = this.callBack; //赋值为了不改变函数内调用的this
        cb(this.name);
      }
    }

2、重写history方法，并添加window.addHistoryListener事件机制。添加event-bus即可，代码如下：

    function addMethod() {
      let historyDep = new Dep();
      return function (name) {
        if (name === 'historychange') {
          return function (name, fn) {
            let event = new Watch(name, fn)
            historyDep.defined(event);
          }
        } else if (name === 'pushState' ) {
          let method = history[name];
          return function () {
            console.log('pushState','arguments',arguments[2])
            method.apply(history, arguments);
            historyDep.notify();
          }
        }else if ( name === 'replaceState') {
          let method = history[name];
          return function () {
            console.log('replaceState','arguments',arguments[2])
            method.apply(history, arguments);
            historyDep.notify();
          }
        }

      }
    }
    let addHistoryMethod = new addMethod()
    window.addHistoryListener = addHistoryMethod('historychange');
    history.pushState = addHistoryMethod('pushState');
    history.replaceState = addHistoryMethod('replaceState');

重写之后、在页面上

window.addHistoryListener('history',function(){
//注意这个方法只要路由发生变化就会被触发
    console.log('窗口的history改变了');
})
//如果想一进入页面，window.addHistoryListener就能监听到，加入这句话
window.pushState(null,null,window.location.href)

五、一个小的业务场景

当用户进入一个页面按手机系统自带的返回按钮时，弹出一个挽留框，并阻止用户跳出这一行为。
解决方案
1、在进入当前页面时，通过pushState(null,null,window.location.href)，在history栈中增加一条和当前路径相同的地址
2、当用户点击返回时，会触发window.onpopstate ，让pushState行为在用户要返回时被popState监听到，此时弹出挽留框，页面还是之前的页面没有变化。

window.onpopstate = function(){
    //一进入页面时并不会触发这个方法，只有页面地址要更改 
      后才可以触发，此时可以监听到pushState事件
      //显示挽留弹窗
}
window.history.pushState(null,null,window.location.href)

测试发现问题
在安卓手机上，页面打开后，如果用户点击了页面，onpopstate事件监听就能正常触发。如果页面打开无任何操作（单纯滑动也不行），直接按android返回按钮。事件回调就没触发，直接退出了。ios没有问题。很多人遇到了这个问题，目前还没有解决，妥协的方案是诱导用户进行点击页面的操作。