基础知识
hash 模式
- hash：在前端领域中，将 # 称为哈希符或者锚点，位于 # 的值则被称为哈希值。
- 原理：
onhashchange事件。 - 特点：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。通过
onhashchange监听哈希值的变化，前端即使并没有发起http请求他也能够找到对应页面的代码块进行按需加载，做出响应。
history 模式
- history：使用 history api 对浏览器历史记录栈进行操作。
- 原理：H5 新增的
pushState()和replaceState()方法 - 特点：
pushState()和replaceState()方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
hash 模式与 history 模式区别
| hash | history | |
|---|---|---|
| 浏览器支持 | 基本支持所有浏览器 | 支持 HTML5 API 的浏览器 |
| URL 显示 | 永远带有 # 号，不符合现阶段 URL 规范 | 符合现阶段 URL 规范 |
| 界面后退 |
onhashchange 事件处理跳转 |
history.back() |
| 界面前进 |
onhashchange 事件处理跳转 |
hsitory.forward() |
| 界面刷新 | 支持 | 二级界面会出现 404 错误 |
hash 模式缺点
- URL 带有 # 号，不符合 URL 的规范（看起来也很丑）
- 有的app里面url是不允许带有#号，如果使用 hash 模式将会引起错误
history 模式缺点
- 只有支持 H5 API 的浏览器才支持该模式
- 界面刷新会引起 404 错误
原因：pushState()和replaceState()是将url替换并且不刷新页面，由于http 并没有去请求服务器该路径下的资源，当刷新时，如果服务器中没有相应的响应或者资源，就会显示404。
解决方式：后台进行相应的配置，建议查看官方文档
