history的pushState和replaceState_history pushstate replace-CSDN博客

本文深入探讨HTML5的History API，包括pushState和replaceState方法，讲解如何在不刷新页面的情况下改变URL，以及如何利用这些功能创建单页面应用。同时，文章详细解释了popstate事件的触发条件和使用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pushState和replaceState

HTML5新接口，可以改变网址(存在跨域限制)而不刷新页面，这个强大的特性后来用到了单页面应用如：vue-router，react-router-dom中。
注意:仅改变网址,网页不会真的跳转,也不会获取到新的内容,本质上网页还停留在原页面!

window.history.pushState(data, title, targetURL);
@状态对象：传给目标路由的信息,可为空
@页面标题：目前所有浏览器都不支持,填空字符串即可
@可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data

window.history.replaceState(data, title, targetURL);
@类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录

popstate事件

popstate事件会在点击后退、前进按钮(或调用history.back()、history.forward()、history.go()方法)时触发。前提是不能真的发生了页面跳转,而是在由history.pushState()或者history.replaceState()形成的历史节点中前进后退
注意:用history.pushState()或者history.replaceState()不会触发popstate事件。

window.onpopstate = function(event) {
  console.log(event.state);
  console.log(window.history.state;);
};
@以上两种log效果相同,皆可获取之前在pushState和replaceState中传入的data