在原生 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();
}
