在前端开发中，我们经常需要监听页面URL的变化，并对其进行相应的处理。比如，在单页应用（SPA）中，我们会使用路由来实现页面的切换，而路由的实现则需要监听URL的变化。
那么，在JavaScript中，如何监听window.location.href的变化呢？本文将为大家详细介绍这一问题。
通过监听hashchange事件
在早期的Web开发中，我们通常使用锚点（hash）来实现页面的局部跳转。当URL中的锚点改变时，浏览器会触发hashchange事件。
因此，我们可以通过监听hashchange事件来监测URL中锚点的变化。示例代码如下：
------------------------------------- ---------- - ----------------- ---------- ---
然而，在现代Web应用中，我们更多地使用HTML5的History API来实现页面的无刷新跳转。在这种情况下，hashchange事件并不能满足我们的需求。
通过监听popstate事件
HTML5的History API提供了pushState和replaceState方法，它们可以修改浏览器的历史记录，并且不会引起页面的刷新。当我们调用这些方法时，浏览器地址栏中的URL会发生变化，但是hashchange事件并不会被触发。
此时，我们可以使用popstate事件来监听URL的变化。当用户点击前进或后退按钮时，或者通过pushState和replaceState方法修改URL时，浏览器都会触发popstate事件。
----------------------------------- ---------- - --------------------- ---------- ---
需要注意的是，在页面首次加载时，也会触发一次popstate事件。因此，我们需要判断当前是否为页面首次加载，避免误判。
--- ----------- - -----
----------------------------------- --------------- -
-- ------------- -
----------- - ------
-------
-
--------------------- ----------
---总结
本文介绍了如何在JavaScript中监听window.location.href的变化，主要包括以下两种方式：
- 监听
hashchange事件：适用于早期Web开发中使用锚点实现局部跳转的情况。 - 监听
popstate事件：适用于现代Web应用中使用History API实现无刷新跳转的情况。
以上两种方式各有优缺点，具体使用时需要根据实际情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/31130