一、直观区别
hash路由带#号，history路由不带#号。
二、 实现原理不同
hash: 当页面中的 hash 发生变化时，会触发hashChange事件，通过监听hashChange事件进行页面定位，渲染不同的内容;
history: 利用HTML5 History API 提供的 history.pushState方法或者 history.replaceState 方法，监听popstate事件，需要客户端和服务端共同的支持。
补充：History API
| back() | 后退到上一个路由 |
| forward() | 如果存在下一个路由记录，前进到下一个路由 |
| go(number) | 进入到任意一个路由，正数为前进，负数为后退 |
| pushState(obj, title, url) | 前进到指定的 URL，不刷新页面 |
| replaceState(obj, title, url) | 用 url 替换当前的路由，不刷新页面 |
三、为什么history需要客户端和服务端共同支持？
| 点击页面导航 | 强制刷新页面 | |
|---|---|---|
| hash模式 | 浏览器不向服务端发送请求，匹配路由规则，进行组件切换。 | 向服务端重新请求（请求地址为 /#/ 之前内容，例：http://localhost:8080/demo/#/index => http://localhost:8080/demo）， 服务端仍然会返回同一个html，一般为 index.html，此文件再下载引入的 js、css 等文件，接着根据 hash 值匹配路由，因为 hash 值没有变化，所以刷新前后的页面内容是一致的。 |
| history模式 | 浏览器不向服务端发送请求，利用 h5 的 history API进行导航。 | 向服务端重新请求（请求地址为地址栏全部内容，例：http://localhost:8080/demo/index => http://localhost:8080/demo/index）， 此时如果不重写配置内容（后端做保底映射，将请求拦截到index.html上），服务器匹配不到资源会返回404。 若服务器配置正确，则返回index.html，再引入js、css 等文件，接着根据地址栏中的地址，去匹配对应的组件进行渲染，此时刷新前后的页面内容是一致的。 |
