如何监听 pushstate 和 replacestate 的变化呢？

Vue面试题 5月前 0 167

pushState 和 replaceState 是 HTML5 History API 的一部分，它们可以改变浏览器的 URL 而不重新加载页面。然而，这两个方法并不会触发任何事件，因此我们不能直接监听它们的变化。

但是，我们可以通过一些技巧来实现这个功能：

覆盖原生方法：我们可以创建一个新的函数来覆盖原生的 pushState 和 replaceState 方法。在这个新的函数中，我们可以添加自己的逻辑，然后调用原生的方法。
例如：
```
var originalPushState = history.pushState;
history.pushState = function () {
 // 添加自己的逻辑
 ...
 // 调用原生的方法
 return originalPushState.apply(history, arguments);
};
```
这个方法可以让我们在每次调用 pushState 或 replaceState 时执行自己的逻辑。但是需要注意的是，这种方法可能会与其他使用这两个方法的代码产生冲突。
使用路由库：如果你使用的是 Vue.js，那么可以使用 vue-router 库来管理路由。vue-router 库内部使用了 pushState 和 replaceState 方法，它提供了一些钩子函数，让我们可以在路由变化时执行自己的逻辑。

例如：
```
router.beforeEach((to, from, next) => {
 // 添加自己的逻辑
 ...
 next();
});
```
这个方法可以让我们在每次路由变化时执行自己的逻辑，而不需要直接修改原生的方法。

总的来说，虽然我们不能直接监听 pushState 和 replaceState 的变化，但我们可以通过一些技巧来实现这个功能。你可以根据你的需求，选择合适的方法。