window.location.hash 配合 hashchange 事件可实现无刷新跳转，支持前进后退且不重载页面；需监听事件、手动初始化路由、编码特殊字符，并注意服务端无法获取 hash 值。
用 window.location.hash 配合 hashchange 事件，可以实现 URL 地址栏变化、浏览器前进后退正常响应，但不触发页面重新加载——这就是典型的“无刷新跳转”，也是早期单页应用（SPA）的核心机制之一。
监听 hash 变化并响应路由逻辑
浏览器在 hash 值改变时（包括用户手动修改地址栏、点击带 #xxx 的链接、或脚本调用 location.hash = 'xxx'），会触发 hashchange 事件。你需要在页面加载后立即注册监听：
<script></script>
window.addEventListener('hashchange', function() {
const hash = window.location.hash.substring(1); // 去掉 #
if (hash === 'home') {
renderHome();
} else if (hash === 'about') {
renderAbout();
} else {
renderNotFound();
}
});
主动触发跳转：修改 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 模式不要混用，否则路由逻辑易混乱
