pushstate 和 popstate的用法详解

pushState和popState是HTML5中新增的两个API，用于操作浏览器的历史记录，实现前端路由管理。

pushState的用法：

history.pushState(stateObject, title, URL);

该方法将新的状态（state）压入浏览器历史记录栈，并且更新页面的URL。该方法接收三个参数：

• stateObject：表示新压入的状态对象，可以是任何JavaScript对象。
• title：新页面的标题，一般传递一个空字符串即可。
• URL：表示新页面的URL地址。

pushState方法可以在不刷新页面的情况下，改变页面的URL，这样就可以实现前端路由的效果。

popState的用法：

window.addEventListener("popstate", function(event) { // 处理历史记录改变事件 });

该方法用于监听浏览器的历史记录改变事件，并执行相关的处理。当用户点击浏览器的后退或前进按钮时，就会触发该事件。在事件处理函数中，可以根据event.state属性获取到当前的历史状态，从而进行相应的处理。