JavaScript哈希路由是利用URL中#后hash值实现SPA导航的机制，不触发页面刷新，通过监听hashchange事件并解析location.hash来渲染对应视图，兼容IE8+且无需服务端配置，但SEO差、URL不美观。
JavaScript哈希路由是一种利用 URL 中 # 后面的部分（即 hash 值）来模拟页面跳转、实现单页面应用（SPA）导航的机制。它不触发页面刷新，只改变 URL 的 hash 段，通过监听 hash 变化来渲染对应视图。
哈希路由的核心原理
浏览器在 hash 改变时不会向服务端发起请求，但会触发 hashchange 事件。JavaScript 可以监听该事件，读取 location.hash，并据此切换组件或内容。
- URL 示例：
https://example.com/#/home、https://example.com/#/user?id=123 - hash 值是
location.hash获取的字符串，开头带#，需用.slice(1)去掉 - 修改 hash 可用
location.hash = '/about'或history.pushState()（但后者不属哈希路由）
手动实现一个简易哈希路由器
不需要框架也能快速搭出基础路由逻辑：
- 定义路由表：用对象映射路径到渲染函数，如
{ '/home': renderHome, '/about': renderAbout } - 编写路由匹配与渲染函数：解析 hash、查找匹配项、调用对应函数更新 DOM
- 监听 hashchange：首次加载也要手动执行一次，避免刷新后空白
- 示例关键代码：
function route() {
const path = location.hash.slice(1) || '/';
const handler = routes[path] || routes['/404'];
handler && handler();
}
window.addEventListener('hashchange', route);
route(); // 首次加载时执行
哈希路由的优缺点
适合轻量 SPA 或兼容老浏览器的场景，但也有明显局限：
立即学习“Java免费学习笔记（深入）”；
- ✅ 无需服务端配置，所有路径都指向同一 HTML 文件即可
- ✅ 兼容 IE8+，对 history API 支持差的环境友好
- ❌ URL 中的
#不够美观，SEO 友好性差（搜索引擎通常忽略 hash 后内容） - ❌ 不支持
history.back()的语义化行为（虽然能用，但体验不如 History 路由自然）
和 History 路由的区别
现代前端框架默认多用 History 模式（如 React Router v6、Vue Router 的 createWebHistory），它依赖 history.pushState() 和 popstate 事件，URL 更干净（如 /user/1）。但需要服务端配合——所有前端路由路径都应返回同一 index.html，否则直接访问会 404。哈希路由则天然规避这个问题。
基本上就这些。哈希路由不复杂但容易忽略首次渲染和路径标准化（比如统一处理末尾斜杠、大小写），实际项目中若无兼容要求，优先考虑 History 模式；若求稳、要快速上线或支持旧环境，哈希路由仍是可靠选择。
