当点击链接将你重定向到同一域名的不同页面时，这些似乎都不起作用。因此，我提出了自己的解决方案:

let pathname = location.pathname;
window.addEventListener("click", function() {
    if (location.pathname != pathname) {
        pathname = location.pathname;
        // code
    }
});

编辑:您还可以检查popstate事件(如果用户返回一个页面)

window.addEventListener("popstate", function() {
    // code
});

最好的祝愿,

微积分

在一个单独的线程中找到了一个工作答案:

没有一个事件是永远有效的，对于大多数大型spa来说，monkey patch pushState事件是非常偶然的。

所以聪明的投票对我来说是最有效的。您可以添加任意多的事件类型，但这些似乎对我来说做得很好。

为TS编写，但很容易修改:

const locationChangeEventType = "MY_APP-location-change";

// called on creation and every url change
export function observeUrlChanges(cb: (loc: Location) => any) {
  assertLocationChangeObserver();
  window.addEventListener(locationChangeEventType, () => cb(window.location));
  cb(window.location);
}

function assertLocationChangeObserver() {
  const state = window as any as { MY_APP_locationWatchSetup: any };
  if (state.MY_APP_locationWatchSetup) { return; }
  state.MY_APP_locationWatchSetup = true;

  let lastHref = location.href;

  ["popstate", "click", "keydown", "keyup", "touchstart", "touchend"].forEach((eventType) => {
    window.addEventListener(eventType, () => {
      requestAnimationFrame(() => {
        const currentHref = location.href;
        if (currentHref !== lastHref) {
          lastHref = currentHref;
          window.dispatchEvent(new Event(locationChangeEventType));
        }
      })
    })
  });
}

使用

observeUrlChanges((loc) => {
  console.log(loc.href)
})

window.onhashchange = function() { 
     //code  
}

window.onpopstate = function() { 
     //code  
}

or

window.addEventListener('hashchange', function() { 
  //code  
});

window.addEventListener('popstate', function() { 
  //code  
});

与jQuery

$(window).bind('hashchange', function() {
     //code
});

$(window).bind('popstate', function() {
     //code
});

添加一个哈希更改事件侦听器!

window.addEventListener('hashchange', function(e){console.log('hash changed')});

或者，监听所有URL更改:

window.addEventListener('popstate', function(e){console.log('url changed')});

这比下面的代码要好，因为在window中只能存在一个东西。Onhashchange，你可能会覆盖其他人的代码。

// Bad code example

window.onhashchange = function() { 
     // Code that overwrites whatever was previously in window.onhashchange  
}

在做一点chrome扩展时，我遇到了一个额外的问题:有时，页面变化而不是URL。

例如，只要进入Facebook主页，然后点击“主页”按钮。你将重新加载页面，但URL不会改变(单页应用程序样式)。

99%的时间里，我们在开发网站，这样我们就可以从Angular、React、Vue等框架中获取这些事件。

但是，在我的Chrome扩展(在香草JS)的情况下，我不得不听一个事件，将触发每个“页面变化”，这通常可以通过URL变化捕获，但有时它不会。

我自己的解决方案如下:

listen(window.history.length);
var oldLength = -1;
function listen(currentLength) {
  if (currentLength != oldLength) {
    // Do your stuff here
  }

  oldLength = window.history.length;
  setTimeout(function () {
    listen(window.history.length);
  }, 1000);
}

leoneckert解决方案，应用于窗口历史记录，当单页应用中的页面改变时，窗口历史记录也会改变。

这不是火箭科学，而是我发现的最干净的解决方案，考虑到我们在这里只检查一个整数相等，而不是更大的对象或整个DOM。

适用于Chrome 102+ (2022-05-24)

navigation.addEventListener("navigate", e => {
  console.log(`navigate ->`,e.destination.url)
});

消防引用巫术崇拜者