hash模式是通过改变锚点(#)来更新页面URL，并不会触发页面重新加载，我们可以通过window.onhashchange监听到hash的改变，从而处理路由。
history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。
前端路由系统的由来
随着 ajax 的使用越来越广泛，前端的页面逻辑开始变得越来越复杂，特别是spa（路由控制和视图转换框架）的兴起，前端路由系统随之开始流行。
从用户的角度看，前端路由主要实现了两个功能（使用ajax更新页面状态的情况下）：
1.记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存（分享）时的状态）；
2.可以使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到使用ajax更新页面之前的状态，url也回到之前的状态）；
要实现这两个功能，我们需要做到：
- 改变 url 且不让浏览器向服务器发出请求；
- 监测 url 的变化；
- 截获 url 地址，并解析出需要的信息来匹配路由规则。
什么是hash模式
使用window.location.hash属性及窗口的onhashchange事件，可以实现监听浏览器地址hash值变化，执行相应的js切换网页。
window.onhashchange=function(){
let hash=location.hash.slice(1);
document.body.style.color=hash;
}localtion是js里管理地址栏的内置对象，是window对象的一部分，可通过window.localtion访问（在w3cshool里的详细介绍）
由于hash发生变化的url都会被浏览器记录下来，使得浏览器的前进后退都可以使用了，尽管浏览器没有亲求服务器，但是页面状态和url关联起来。
这就是人们所说的前端路由，也成为了单页应用标配。
敲黑板：
1.hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。如http://localhost/index.html#abc，这里的#abc就是hash；
2.散列值是不会随请求发送到服务器端的，所以改变hash，不会重新加载页面
3.监听 window 的 hashchange事件，当散列值改变时，可以通过 location.hash 来获取和设置hash值
4.location.hash值的变化会直接反应到浏览器地址栏
由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发hashchange事件，浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。
触发hashchange事件的几种情况
1.浏览器地址栏散列值的变化（包括浏览器的前进、后退）会触发window.location.hash值的变化，从而触发onhashchange事件
2.当浏览器地址栏中URL包含哈希如 http://www.baidu.com/#home，这时按下输入，浏览器发送http://www.baidu.com/请求至服务器，请求完毕之后设置散列值为#home，进而触发onhashchange事件
3.当只改变浏览器地址栏URL的哈希部分，这时按下回车，浏览器不会发送任何请求至服务器，这时发生的只是设置散列值新修改的哈希值，并触发onhashchange事件
4.html中<a>标签的属性 href 可以设置为页面的元素ID如 #top，当点击该链接时页面跳转至该id元素所在区域，同时浏览器自动设置 window.location.hash 属性，地址栏中的哈希值也会发生改变，并触发onhashchange事件
为何实际项目中地址栏只改变哈希部分，按下回车会向服务器发送请求？
这个问题的出现是应为缓存的配置（强缓存，协商缓存），如果不配置任何缓存，地址栏没有任何变化，按下回车也会重新加载页面。
什么是history模式
window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。
History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。
由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。
浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作
history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法。MDN相关介绍。这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。
当使用history模式时，url就像正常的url,例如http://www.abc.com/user/id相比hash模式更加好看。特别注意，history模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。
通过history api，我们丢弃了丑陋的#，但是有一个缺点：当应用通过vue-router跳转到某个页面后，因为此时是前端路由控制页面跳转，虽然url改变，但是页面只是内容改变，并没有重新请求，所以这套流程没有任何问题，但当前的页面刷新时，此时会重新发起请求，如果服务器中没有相应的相应或者资源，会刷出一个404来。所以history模式不怕前进，不怕后退，就怕刷新。
那为什么
hash模式不会出现这个问题呢?因为hash虽然可以改变URL，但不会被包括在HTTP请求中。它被用来指导浏览器动作，并不影响服务器端，因此，改变hash并没有改变url，所以页面路径还是之前的路径，nginx不会拦截。
hash模式和history模式对比
pushState()设置新的url可以是和当前url同源的任意url;hash只可修改#后面的部分，只能设置当前url同文档的url。
pushState()设置的新url可与当前url一致，这样也会把记录添加到栈中；hash必须设置与当前url不同的url的，才会触发动作将记录添加到栈中。
pushState()通过stateObject参数可以添加任意类型的数据到记录中；hash只可添加短字符串。
pushState()可额外设置title属性供后续使用。
不过，hash模式也有比history模式优势的地方。
hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误。
history模式下，前端的url必须和实际向后端发起请求的url一致，如http://abc.com/user/id,后端如果没有对user/id的路由处理，将返回404错误。
