Javascript 如何在SPA中检测URL更改 注

解决方案应该是纯Javascript——没有外部库和框架

---

在SPA中，所有内容都使用路由机制进行路由。 我只想在url的任何部分发生变化时（不仅仅是散列，我想检测的任何变化）都能听到

以下是SPA的示例

https://www.google.in/
https://www.google.in/women 
https://www.google.in/girl 

现在，每当url从更改为时，我都希望捕获该事件

我试过了

window.addEventListener("hashchange",function(event){
    console.log(this); // this gets fired only when hash changes
});

---

在正常情况下，URL更改时不会发生事件。您正在加载一个新文档（尽管您有

load

等等）

如果您正在使用JavaScript（即使用

pushState

）设置一个新的URL，那么没有事件，但您不需要事件，因为您已经在显式地围绕它编写代码，所以您只需向该代码添加任何其他需要的内容

如果URL通过浏览器的“后退”按钮或类似按钮通过pushState历史记录更改回来，您将看到

---

---

因此，没有一个好的通用方法可以连接到每个SPA。最接近的方法是使用

setInterval

并检查

location.href

的值，看看它自上次检查以来是否发生了变化。

除了昆汀的答案之外：

setInterval

是检查这些变化的一种非常糟糕的方法：它要么从不准时，要么被频繁地解雇

您真正应该做的是监视用户输入事件。点击是最明显的一个，但不要忘记键盘输入。如果发生这些事件中的任何一个，url更改通常只需要一个勾号。因此，在代码中的快速模型中：

let url = location.href;
document.body.addEventListener('click', ()=>{
    requestAnimationFrame(()=>{
      url!==location.href&&console.log('url changed');
      url = location.href;
    });
}, true);

（只需将其放入Github控制台即可查看其工作情况）

---

与

popstate

侦听器一起使用，对于大多数用例来说，这应该足够了。

此脚本将允许您检测SPA中URL的更改：

var-previousUrl=''；
var观察者=新的突变观察者（功能（突变）{
如果（location.href！==previousUrl）{
previousUrl=location.href；
log（`URL改为${location.href}`）；
}
});

@人造丝。。。我说的不仅仅是棱角分明。我想让本在每一次SPA中都处理好这件事。。我把它读成角形的；（很抱歉！感谢您的快速帮助。在我的情况下，推送和弹出状态不起作用。我们需要进一步挖掘才能找到其他可以做的事情