如何监听 pushstate 和 replacestate 的变化呢？
参考回答
在 Vue 中，我们可以通过监听 pushState 和 replaceState 的变化来监控浏览器的历史状态变化。由于 pushState 和 replaceState 是 history API 的一部分，它们不会触发浏览器的 popstate 事件。因此，想要监听这两个方法的调用，我们可以通过劫持这两个方法来触发相应的变化。
详细讲解与拓展
pushState和replaceState监听：
pushState和replaceState是用于操作浏览器历史记录的方法，它们不会触发popstate事件。popstate事件只会在用户通过浏览器的“返回”或“前进”按钮改变 URL 时触发。因此，若要监听这些方法的调用，我们需要通过重写它们来监控历史状态变化。这里是一个如何劫持
pushState和replaceState的例子：// 保存原始的 pushState 和 replaceState 方法 const originalPushState = history.pushState; const originalReplaceState = history.replaceState; // 劫持 pushState 方法 history.pushState = function(state, title, url) { // 执行原始的 pushState 方法 originalPushState.apply(history, arguments); // 触发自定义的事件或处理逻辑 window.dispatchEvent(new Event('historyChange')); }; // 劫持 replaceState 方法 history.replaceState = function(state, title, url) { // 执行原始的 replaceState 方法 originalReplaceState.apply(history, arguments); // 触发自定义的事件或处理逻辑 window.dispatchEvent(new Event('historyChange')); };在这段代码中，我们保存了原始的
pushState和replaceState方法，然后重写了这两个方法。每当调用pushState或replaceState时，我们都会触发一个自定义事件historyChange，用来标识历史记录发生了变化。-
监听自定义事件：
接下来，我们可以监听historyChange事件，并执行相应的操作。例如：window.addEventListener('historyChange', function() { console.log('History state has changed!'); console.log('Current URL:', window.location.href); });当
pushState或replaceState被调用时，会触发historyChange事件，我们可以在事件监听器中执行相关逻辑，如获取当前的 URL 或进行页面状态更新。 -
监听
popstate事件：
除了监听pushState和replaceState，还可以监听浏览器的popstate事件，这在用户使用浏览器的“返回”或“前进”按钮时触发。popstate事件可以帮助我们监听历史记录栈的变化，尤其在实现单页应用（SPA）时非常有用：window.addEventListener('popstate', function(event) { console.log('Location changed to', window.location.href); console.log('State:', event.state); });popstate事件会在浏览器历史记录中的状态发生变化时触发，例如用户点击浏览器的返回按钮或前进按钮。
总结：
pushState和replaceState监听：可以通过劫持history.pushState和history.replaceState方法来监控这些方法的调用，并通过触发自定义事件来处理变化。popstate监听：popstate事件会在浏览器的历史记录栈发生变化时触发，通常用于处理用户通过浏览器的返回或前进按钮改变 URL 的场景。
通过这两种方法，我们可以全面地监听浏览器历史记录的变化，并根据需求做出响应。