哈希路由原理与hashchange使用教程

哈希路由是一种轻量、零后端依赖的前端路由方案，它巧妙利用浏览器对URL中#号后hash值变更不触发页面刷新和HTTP请求的原生特性，结合hashchange事件实现无跳转的视图切换；本文不仅深入浅出地解析其核心原理，更手把手带你用不到50行纯JavaScript从零构建一个功能完整、兼顾兼容性与健壮性的迷你路由器——涵盖路由表定义、hash解析执行、首次加载处理、常见坑点（如iOS Safari静默失效、链接默认行为干扰）及实用优化技巧，让读者真正理解“不刷新也能导航”的底层逻辑并立即上手实践。

哈希路由的本质，是利用浏览器 URL 中 # 后面那一段（即 hash 值）的变化来驱动视图切换，而整个过程不向服务器发请求、也不刷新页面。

哈希路由为什么能不刷新页面？

因为浏览器规定：只要 URL 改变的部分仅限于 hash（比如从 https://site.com/#/home 变成 https://site.com/#/about），就不会触发页面重载，也不会发起 HTTP 请求。这个行为是原生支持的，无需后端配合。

与此同时，浏览器会自动在 hash 变化时抛出 hashchange 事件——这就是我们监听和响应路由变化的入口。

手写一个最小可用的 hash 路由器

不需要框架，50 行以内就能搭出核心逻辑。关键三步：定义路由表、解析当前 hash、绑定监听并渲染。

• 第一步：准备一个路由映射表，把路径字符串对应到渲染函数：

const routes = {
  '/home': () => document.getElementById('app').innerHTML = '

首页内容

• 第二步：写一个路由匹配与执行函数，它读取当前 hash、去掉开头的 #、再查表执行：

function router() {
  const hash = location.hash.slice(1) || '/home';
  (routes[hash] || routes['*'])();
}

• 第三步：监听变化，并在首次加载时也执行一次，避免刷新后白屏：

window.addEventListener('hashchange', router);
router(); // 立即执行，处理初始状态

几个容易踩坑的关键细节

• 用 location.hash = '/about' 修改 hash，而不是 location.href = '#/about' —— 后者可能意外刷新页面
• 始终用 addEventListener 绑定 hashchange，别用 window.onhashchange = handler，后者容易被覆盖
• iOS Safari 在后台切回时可能静默忽略 hashchange，需要加轮询兜底（例如每 300ms 检查一次 location.hash 是否变化）
• hash 值带查询参数也没问题，比如 #/user?id=123，解析时可进一步用 new URLSearchParams() 提取

怎么让链接点击也走路由？

普通 是可以触发 hash 变化的，但默认会滚动到页面内 id 匹配的元素。为避免干扰，建议：

• 给链接加 onclick="event.preventDefault(); location.hash='/about'"
• 或者统一用 JS 控制：，再用事件委托捕获点击

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~