js history.pushstate

// 使用 history.pushState 的示例代码

// 假设当前页面是 http://example.com/a.html

// 创建一个状态对象，可以包含任何可序列化的数据
var stateObj = { page: 1 };

// 调用 pushState 方法，改变 URL 但不会触发页面刷新
history.pushState(stateObj, "page 2", "b.html");

// 现在浏览器地址栏显示的是 http://example.com/b.html，
// 但页面内容并没有变化

// 可以监听 popstate 事件来检测用户点击了后退或前进按钮
window.addEventListener("popstate", function(event) {
    console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});

解释说明：

• history.pushState(state, title, url) 方法允许你向浏览器的历史记录栈中添加新的记录，而不会触发页面的重新加载。

  • state：是一个 JavaScript 对象，可以在以后通过 popstate 事件获取。
  • title：目前大多数浏览器忽略这个参数，通常传入空字符串或 " " 即可。
  • url：是要添加到历史记录的新 URL。它可以是相对路径或绝对路径，但不会导致页面重新加载。

• 当用户点击浏览器的“后退”或“前进”按钮时，会触发 popstate 事件。你可以通过监听该事件来执行相应的操作。