第20天 前端路由原理

前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规
则，显示相应的⻚⾯，并且⽆须刷新⻚⾯。⽬前前端使⽤的路由就只有两种实 现⽅式

1. Hash 模式

www.test.com/#/ 就是 Hash URL ，当 # 后⾯的哈希值发⽣变化时，可 以通过 hashchange 事件来监听到
URL 的变化，从⽽进⾏跳转⻚⾯，并且 ⽆论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.com

window.addEventListener('hashchange', () => {
 // ... 具体逻辑
})

Hash 模式相对来说更简单，并且兼容性也更好

2. History 模式
History 模式是 HTML5 新推出的功能，主要使⽤ history.pushState
和 history.replaceState 改变 URL
通过 History 模式改变 URL 同样不会引起⻚⾯的刷新，只会更新浏览器的历史记录。

// 新增历史记录
history.pushState(stateObject, title, URL)
// 替换当前历史记录
history.replaceState(stateObject, title, URL)

当⽤户做出浏览器动作时，⽐如点击后退按钮时会触发 popState 事件

window.addEventListener('popstate', e => {
 // e.state 就是 pushState(stateObject) 中的 stateObject
 console.log(e.state) })

两种模式对⽐
1.Hash 模式只可以更改 # 后⾯的内容， History 模式可以通过 API 设置任意的同源
URL
2.History 模式可以通过 API 添加任意类型的数据到历史记录中， Hash 模式只能更改 哈希值，也就是字符串
3.Hash 模式⽆需后端配置，并且兼容性好。 History 模式在⽤户⼿动输⼊地址或者刷新
⻚⾯的时候会发起 URL 请求，后端需要配置 index.html ⻚⾯⽤于匹配不到静态资源 的时候