hash 模式
这里的 hash 就是指 url 后的 # 号以及后面的字符。比如说 "www.baidu.com/#hashhash" ，其中 "#hashhash" 就是我们期望的 hash 值。
由于 hash 值的变化不会导致浏览器像服务器发送请求，而且 hash 的改变会触发 hashchange 事件，浏览器的前进后退也能对其进行控制，所以在 H5 的 history 模式出现之前，基本都是使用 hash 模式来实现前端路由。
history 模式
利用了 HTML5 History 中新增的 pushState() 和 replaceState() 方法，这两个方法可以添加和修改历史记录条。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向服务器发送请求。
history.pushState() 和 history.replaceState() 均接收三个参数（state, title, url）
参数说明如下：
-
- state：合法的 Javascript 对象，可以用在 popstate 事件中
- title：现在大多浏览器忽略这个参数，可以直接用 null 代替
- url：任意有效的 URL，用于更新浏览器的地址栏
history.pushState() 和 history.replaceState() 的区别在于：
-
- history.pushState() 在保留现有历史记录的同时，将 url 加入到历史记录中。
- history.replaceState() 会将历史记录中的当前页面历史替换为 url。
由于 history.pushState() 和 history.replaceState() 可以改变 url 同时，不会刷新页面，所以在 HTML5 中的 histroy 具备了实现前端路由的能力。
但需要注意的是，history 在修改 url 后，虽然页面并不会刷新，但我们在手动刷新，或通过 url 直接进入应用的时候， 服务端是无法识别这个 url 的。因为我们是单页应用，只有一个 html 文件，服务端在处理其他路径的 url 的时候，就会出现404的情况。 所以，如果要应用 history 模式，需要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回单页应用的 html 文件。
总结
- hash 模式下，url中会携带一个 hash 符号#，仅 hash 符号之前的内容会被包含在请求中，因此不会返回 404 错误。
- history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，需要服务器对路由进行配置，否则将返回 404 错误。
原文地址：https://www.cnblogs.com/yaokai729/p/11442951.html