前端路由实现（history）

Posted 2021-02-05 rxqlx

HTML5 history 新增了两个 API：history.pushState 和 history.replaceState

两个 API 都接收三个参数：

1.状态对象（state object）：一个 javascript对象，与用 pushstate()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

2.标题（title）：FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。

3.地址（URL）：新的历史记录条目的地址。浏览器不会再调用 pushState() 方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前的URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

相同之处是两个API都会操作浏览器的历史记录，而不会引起页面的刷新。

不同之处在于pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。