# 前端路由
原理：监听浏览器地址变化，渲染对应页面。
浏览器地址变化更改主要有以下三种方式：
- 浏览器地址改变；
- 浏览器前进、后退；
- 刷新页面。
# hash 模式 (opens new window)
原理：监听浏览器地址 hash 的改变，渲染对应页面内容。
- 通过
window.location.hash获取浏览器地址 hash 值（也称散列值）； - 通过
onhashchange(opens new window)监听浏览器地址 hash 值的改变。触发条件为：- 浏览器前进、后退，导致
window.location.hash的改变； - 浏览器地址携带有 hash 值，页面加载时会先以不带 hash 值的地址 url，请求完成之后将
window.location.hash设置为 hash 值； - a 标签的 href 属性设置为某标签 ID，点击该类型 a 标签也会将
window.location.hash设置为 hash 值。
- 浏览器前进、后退，导致
- hash 值的改变会直接反应到浏览器地址，但不会发送到服务器，也不会改变页面内容。
# History 模式 (opens new window)
原理：利用 h5 history API 改变浏览器地址，渲染对应页面内容。
该模式需要后端配合进行，当浏览器地址改变并刷新时，因为是拿当前的新地址去发起请求，如果后端没有做好准备的话，就会报错。
# pushState()
向浏览器历史中添加一条记录，该操作不会触发页面内容的更新，但会直接反应到浏览器地址上。
pushState()需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个 URL。新 URL 必须与当前 URL 同源，否则会抛出一个异常。该参数是可选的，缺省为当前 URL。
该方法可以将 URL 设置为 hash 值，但不会触发 onhashchange 事件。
# replaceState()
修改浏览器历史中的最后一条记录。
该方法的参数和作用与pushState()基本相同。
# popState()
引用 MDN (opens new window) 文档解释：
window.onpopstate是popstate事件在window对象上的事件处理程序。每当处于
激活状态的历史记录条目发生变化时，popstate 事件就会在对应 window 对象上触发。如果当前处于激活状态的历史记录条目是由
history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的 state属性包含了这个历史记录条目的 state 对象的一个拷贝。
pushState()和replaceState()不会触发该方法；- 页面第一次加载的时候也不会触发该方法；
- 触发条件：点击浏览器前进、后退，调用
history.back()、history.forward()和history.go()。
参考文章：
https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
https://blog.csdn.net/Charissa2017/article/details/104779412
https://juejin.cn/post/6844903589123457031