hashchange监听锚点实现单页跳转技巧

本文详解了如何利用浏览器原生的 `hashchange` 事件实现轻量级单页应用（SPA）导航：通过监听 URL 中 `#` 后锚点的变化，无需页面刷新即可动态切换视图，配合路由映射表、带 `#` 的普通链接及手动初始化逻辑，轻松构建可回退、兼容性极佳（支持 IE8+）的前端路由系统，同时提醒了初始 hash 需主动处理、避免特殊字符、以及纯 hash 路由在 SEO 和服务端渲染方面的局限性，为初学者和快速原型开发提供了清晰实用的落地方案。

直接监听 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');
});

今天关于《hashchange监听锚点实现单页跳转技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！