原生 js 如何进行监听路由的变化？

在原生 JavaScript 中，可以使用以下方法来监听路由的变化：

1. 使用 hashchange 事件

当使用 hash 路由（即 URL 中包含 # 部分）时，可以通过监听 hashchange 事件来响应路由的变化。

示例：

window.addEventListener("hashchange", function () {
  console.log("Hash changed to:", window.location.hash);
  // 可以在这里根据 hash 值更新页面内容
});

// 手动触发 hashchange 事件
window.location.hash = "#section1"; // 会触发 hashchange 事件

2. 使用 popstate 事件

当使用 HTML5 的 History API（即 pushState 和 replaceState）时，可以通过监听 popstate 事件来响应路由的变化。

示例：

window.addEventListener("popstate", function (event) {
  console.log("Location changed to:", document.location.href);
  // 可以在这里根据历史记录状态更新页面内容
});

// 使用 History API 更新 URL
history.pushState({ page: 1 }, "Title 1", "/page1");
history.pushState({ page: 2 }, "Title 2", "/page2");

3. 手动管理路由状态

如果需要更复杂的路由管理，可能需要手动维护路由状态并响应 URL 的变化。可以结合 hashchange 和 popstate 事件来实现更复杂的路由逻辑。

示例：

function updatePageContent() {
  const path = window.location.pathname;
  console.log("Current path:", path);
  // 根据路径更新页面内容
}

// 监听路径变化
window.addEventListener("popstate", updatePageContent);

// 处理初始加载时的路径
window.addEventListener("load", updatePageContent);

// 使用 History API 更新 URL
function navigateTo(path) {
  history.pushState(null, "", path);
  updatePageContent();
}