• hash模式

• 这里的hash指url里#后面的内容。hash也称锚点，其对应页面内id的值与之相同的元素

• hash值变化不会导致向服务器发送请求，而且hash改变会触发hashchange事件

• 而这个hashchange事件是核心，当事件触发的时候，我们可以根据hash的不同，加载不同的DOM

• history模式

• history利用h5中新增的pushState(),replaceState()方法。前者将传入的url直接压入历史记录栈，后者将url替换当前的历史记录栈

  window.history.pushState(state, title, url) 
  // state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
  // title：标题，基本没用，一般传 null
  // url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
  //如 当前url是 https://www.baidu.com/a/ , 执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
  //执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

  window.history.replaceState(state, title, url)
  // 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录

  window.addEventListener("popstate", function() {
      // 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发              
  });

  window.history.back() // 后退
  window.history.forward() // 前进
  window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()或者history.forward()方法）

二者区别
显然history应用更加广泛，

• pushState可以设置同源下的任意url，而hash只能修改#后面的内容，因此只能设置当前url同文档的url

• pushState设置新的url可以与当前的url一样，而hash设置的新值不能与当前url一样

• pushState通过stateObject参数可以将任何数据类型添加到记录中，hash只能添加短字符串

• pushState可以设置额外的title供以后使用

• history在刷新页面时，如果服务器中没有相应的响应或资源，就会出现404。而hash仅仅是#前面的内容包含在http请求之中，对于后端来说说即使没有做到路由全覆盖，也不会报404

• hash兼容到IE8，history兼容到IE10

history相比之下会更加复杂点，我的只是一点随记，如果有什么不懂可以参考MDN，附上链接 =-=
https://developer.mozilla.org/zh-CN/docs/Web/API/History_API