早期路由是在后端实现的。页面直接根据url重新加载。页面越来越复杂，服务器端的压力越来越大。随着ajax的出现，页面实现了非重载即可刷新数据，也为前端路由的出现奠定了基础。我们可以通过记录url来记录ajax的变化，从而实现前端路由。RouterurlHistoryhashHistoryAPI可以查看MDN文档：https://developer.mozilla.org/en-US/docs/Web/API/History本文主要讲两个新的APIhistory.pushState和history.replaceState(相同点：两者都是对浏览器的历史记录进行操作，不会导致页面刷新。不同点：pushState会添加新的历史记录，replaceState会替换当前的历史记录。）这两个API接收的三个参数都是状态对象（state）——每当用户导航到新创建的状态时，都会触发popstate事件，事件对象的state属性包含历史条目的状态对象的副本，默认情况下为null。title(标题)—表示要进入的状态，默认为空。Address(URL)—新历史条目的地址，传入的URL应与当前URL同源，否则pushState()将抛出异常。默认为当前URL。我们在百度的控制台输入window.history.pushState(null,null,"https://www.baidu.com/?name=zzz")，url就变成这样一个状态对象（state）——每当用户导航时到新创建的state，会触发popstate事件，event对象的state属性包含历史条目state对象的副本，默认为null。title(标题)—表示要进入的状态，默认为空。Address(URL)—新历史条目的地址，传入的URL应与当前URL同源，否则pushState()将抛出异常。默认为当前URL。我们在百度的控制台输入window.history.pushState(null,null,"https://www.baidu.com/?name=zzz")。这时候url就变成这样了。每次更改url时，页面都不会刷新。浏览器也根据上述生成历史记录。这是在不刷新页面的情况下更改url的前提。先说第一个参数状态对象。如果运行history.pushState()方法，历史栈对应的记录会被存储在state对象中，我们可以随时主动调用历史入口。所以此时执行history.go(-1)，可以回到之前的状态（即让url变为https://www.baidu.com/?name=zzz之前的状态）。官方文档提供了popstate事件，popstate事件是我们在历史中切换的时候产生的。对于popstate事件的触发方式，各个浏览器的实现也不同，我们可以根据不同的浏览器做兼容处理。hash我们经常在url中看到#，这个#有两种情况，一种是我们所谓的锚点，比如典型的返回顶部按钮原理，Github上各种标题之间的跳转等，路由中的#不叫锚点，我们叫它hash，大型框架的路由系统大部分都是用hash实现的。基于哈希的前端路由的优点是兼容低版本浏览器。以哈希形式（也可以使用HistoryAPI进行处理）为例。当url的hash变化时，会触发hashchange注册的回调，在回调中执行不同的功能。操作。react-routerreact-router的底层原理是依赖历史，后面会介绍实现原理。
