如何用window.location.hash与hashchange事件实现无刷新页面跳转

window.location.hash 配合 hashchange 事件可实现无刷新跳转，支持前进后退且不重载页面；需监听事件、手动初始化路由、编码特殊字符，并注意服务端无法获取 hash 值。

用 window.location.hash 配合 hashchange 事件，可以实现 URL 地址栏变化、浏览器前进后退正常响应，但不触发页面重新加载——这就是典型的“无刷新跳转”，也是早期单页应用（SPA）的核心机制之一。

监听 hash 变化并响应路由逻辑

浏览器在 hash 值改变时（包括用户手动修改地址栏、点击带 #xxx 的链接、或脚本调用 location.hash = 'xxx'），会触发 hashchange 事件。你需要在页面加载后立即注册监听：

<script>
window.addEventListener('hashchange', function() {
  const hash = window.location.hash.substring(1); // 去掉 #
  if (hash === 'home') {
    renderHome();
  } else if (hash === 'about') {
    renderAbout();
  } else {
    renderNotFound();
  }
});
</script>

主动触发跳转：修改 hash 即可

不需要发请求、不刷新页面，只需赋值 location.hash，就能更新地址栏并触发 hashchange：

• location.hash = 'contact'; → 地址变为 https://example.com/#contact，自动触发监听函数
• location.hash = ''; 或 location.hash = '#'; → 清空 hash，变成 https://example.com/#
• 注意：重复设置相同 hash 不会再次触发 hashchange；只有实际变化才会触发

首次加载时也要处理当前 hash

页面初次打开时，hashchange 不会自动触发，必须手动读取当前 hash 并渲染对应内容：

function initRouter() {
  const hash = window.location.hash.substring(1);
  renderByHash(hash);
}
initRouter(); // 立即执行
window.addEventListener('hashchange', () => {
  initRouter(); // 复用逻辑，保持一致性
});

兼容性与注意事项

• hashchange 在 IE8+、Firefox 3.6+、Chrome 5+ 等现代浏览器中均支持，无需 polyfill
• hash 值不会发送到服务器，服务端无法直接根据 hash 做 SSR（需配合服务端 fallback 或使用 History API）
• 避免在 hash 中使用未编码的特殊字符（如空格、中文），推荐用 encodeURIComponent 编码，读取时用 decodeURIComponent
• 如果同时使用 pushState，注意 hash 和 history 模式不要混用，否则路由逻辑易混乱