如何通过 history.pushState() 方法获取历史更改通知？

在网页开发中，我们经常需要在不刷新页面的情况下改变 URL，这时就需要使用 HTML5 中提供的 history.pushState() 方法。

history.pushState() 方法可以将当前 URL 添加进历史记录中，同时也可以改变 URL。这样用户通过浏览器的前进、后退功能或直接更改 URL 时，页面的内容会跟着改变。

但是，有时我们需要在 URL 发生变化时进行一些操作，比如更新页面的信息或者发送请求等。此时，我们可以利用 history.pushState() 方法，同时结合 popstate 事件来实现。

// 添加历史记录
history.pushState({ page: 'home' }, 'Home', '/');

// 监听历史记录变化
window.addEventListener('popstate', function(event) {
  console.log(event.state); // 输出 { page: 'home' }
});

以上代码演示了如何添加历史记录，并监听历史记录变化。在事件回调函数中可以获取到历史记录中保存的数据，通过这种方式可以实现 URL 变化时的一些操作。

总结：

通过 history.pushState() 方法可以改变 URL 并添加历史记录，同时结合 popstate 事件可以在 URL 变化时触发相应的操作。

参考链接：MDN Web 文档：使用历史记录 API