hash和history两种路由模式的区别

本文参考：https://www.jianshu.com/p/bfffb4b8c9fa
https://www.cnblogs.com/GGbondLearn/p/12239651.html
http://shanhuxueyuan.com/news/detail/137.html

hash模式

hash 就是指 url 尾巴后的 # 号以及后面的字符。这里的 # 和 css 里的 # 是一个意思。hash 也 称作 锚点，本身是用来做页面定位的，她可以使对应 id 的元素显示在可视区域内。

由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件，hashChange事件中获取当前的hash值，并根据hash值来修改页面内容，则达到了前端路由的目的。浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:

window.onhashchange = function(event){ // 点击浏览器前进后退按钮时会触发
     console.log(event.oldURL, event.newURL);
     let hash = location.hash.slice(1); 
     document.body.style.color = hash;
}

关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来。

history模式

已经有 hash 模式了，而且 hash 能兼容到IE8， history 只能兼容到 IE10，为什么还要搞个 history 呢？
首先，hash 本来是拿来做页面定位的，如果拿来做路由的话，原来的锚点功能就不能用了。其次，hash 的传参是基于 url 的，如果要传递复杂的数据，会有体积的限制，而 history 模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。
hash的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由。

history的api

 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 方法不会触发  
        console.log(event.state)            
 });
history.state;//是一个属性，可以得到当前页的state信息。
 // 通过window.history对象来控制页面历史记录跳转
 window.history.back() // 后退
 window.history.forward() // 前进
 window.history.go(1) // 前进一步，-2为后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量

通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。

history模式的问题

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。
history 模式改变 url 的方式会导致浏览器向服务器发送请求，这不是我们想看到的，我们需要在服务器端做处理：如果匹配不到任何静态资源，则应该始终返回同一个 html 页面。

总结

hash模式和history模式的区别

1、hash模式较丑，history模式较优雅;
2、pushState设置的新URL可以是与当前URL同源的任意URL；而hash只可修改#后面的部分，故只可设置与当前同文档的URL;
3、pushState设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发记录添加到栈中;
4、pushState通过stateObject可以添加任意类型的数据到记录中；而hash只可添加短字符串;
5、pushState可额外设置title属性供后续使用;
6、hash兼容IE8以上，history兼容IE10以上;
7、history模式需要后端配合将所有访问都指向index.html，否则用户刷新页面，会导致404错误。