监听window的hashchange事件可捕获URL中#后锚点变化实现无刷新跳转，需手动处理页面首次加载时的初始hash状态，并配合路由映射表和链接完成单页应用导航。
直接监听 window 的 hashchange 事件，就能捕获地址栏中 # 后面的锚点（hash）变化，无需刷新页面，是实现简单单页跳转的核心机制。
监听 hashchange 事件的基本写法
在页面加载后绑定事件监听器，当用户点击带 #xxx 的链接、手动修改地址栏 hash 或调用 history.pushState/replaceState（部分场景）时触发：
window.addEventListener('hashchange', function(e) {
const currentHash = location.hash.slice(1); // 去掉开头的 #
console.log('当前锚点：', currentHash);
// 根据 currentHash 渲染对应内容或切换视图
});注意：hashchange 不会因 location.hash = 'xxx' 赋值而触发首次初始化（即页面刚打开时的 hash），需手动处理初始状态。
配合链接和路由逻辑完成跳转
HTML 中使用普通带 # 的链接即可，浏览器原生支持跳转且不刷新：
<a href="#home">首页</a> <a href="#about">关于</a> <a href="#contact">联系</a>
JS 中根据 hash 值控制显示/隐藏区域或动态加载内容：
- 用
document.querySelector显示对应id的区块，隐藏其他 - 用
fetch加载对应模板或数据（如./pages/about.html）并插入到容器中 - 维护一个路由映射表，让代码更清晰：
const routes = { home: renderHome, about: renderAbout, contact: renderContact };
然后在hashchange回调里执行routes[currentHash]?.()
兼容性与注意事项
hashchange 是较老的标准，所有现代浏览器（包括 IE8+）都支持，基本无需 polyfill。
- 只监听
#及之后的变化，对?查询参数或路径变动无反应 - 用户前进/后退时也会触发，适合构建可回退的单页体验
- 若需 SEO 或服务端直出，纯 hash 路由有局限，可考虑
History API（pushState）升级 - 避免在 hash 中放特殊字符（如空格、中文），建议用
encodeURIComponent编码后再设置
手动触发跳转与初始化补全
除了点击链接，也可用 JS 主动跳转：
location.hash = 'about'; // 触发 hashchange 事件
但页面首次加载时不会触发该事件，因此需主动读取初始 hash 并渲染：
// 初始化
function initRouter() {
const hash = location.hash.slice(1) || 'home';
renderPage(hash);
}
initRouter();
window.addEventListener('hashchange', () => {
renderPage(location.hash.slice(1) || 'home');
});
