js 监听url变化

// 使用 window.onpopstate 事件监听 URL 变化
window.addEventListener('popstate', function(event) {
    // 当浏览器的前进、后退按钮被点击时触发
    console.log('URL changed to: ' + document.location.href);
});

// 使用 history API 来改变 URL，而不会刷新页面
function changeUrl(newUrl) {
    // 将新的 URL 添加到历史记录栈中
    history.pushState({}, '', newUrl);
}

// 示例：点击按钮时改变 URL
document.getElementById('change-url-btn').addEventListener('click', function() {
    changeUrl('/new-url');
});

解释说明：

1. window.onpopstate 事件：当用户通过浏览器的前进或后退按钮改变 URL 时会触发此事件。你可以在这个事件处理函数中执行相应的操作，比如重新加载数据或更新页面内容。
2. history.pushState 方法：用于在不刷新页面的情况下更改 URL，并将新状态添加到浏览器的历史记录中。这样可以实现单页应用（SPA）中的路由功能。
3. 示例代码：通过点击按钮来改变 URL，并使用 onpopstate 监听 URL 的变化。

如果你需要更复杂的 URL 变化监听（例如，hash 变化），可以考虑使用 hashchange 事件。