location.hash是最轻量、兼容性最好的前端路由方案，无需服务端配合或history.pushState，通过监听hashchange事件并手动更新DOM实现；需首次加载时主动匹配路由，正确解析hash值（如slice(1)），避免a标签跳转引发滚动，并注意SEO与分析埋点需手动上报。
location.hash 是最轻量、兼容性最好的前端路由方案，不需要服务器配合，也不依赖 history.pushState，适合静态页面或原型验证。它本质就是监听 URL 中 # 后面的变化，然后手动更新 DOM。
监听 hashchange 事件是核心入口
浏览器原生支持 hashchange 事件，但要注意两个关键点：页面首次加载时该事件不会触发；IE8+ 才完全支持（现代项目基本可忽略 IE8）。必须在初始化时主动执行一次路由匹配，否则打开首页看不到内容。
常见错误现象：location.hash 取值为空字符串（""），不是 "/" 或 "#/" —— 因为 window.location.hash 返回的是带 # 的完整字符串，比如 "#/about"，所以要用 .substr(1) 或 .slice(1) 去掉开头的 #。
- 用
window.addEventListener("hashchange", handler)绑定，不要用window.onhashchange = handler，后者会被覆盖 - 首次渲染建议放在
DOMContentLoaded里，比load更早，避免白屏 - 如果 hash 值非法（如
#/nonexistent），应有兜底逻辑，比如跳转到"/"或显示 404 内容
路由表结构要能处理路径和查询参数
纯 hash 路由本身不解析 query，比如 #/user?id=123 中的 id=123 需要自己拆解。简单场景下，推荐把 query 放在 hash 后面，用 ? 分隔，再用 URLSearchParams 解析（注意 IE 不支持，需 polyfill 或手写解析）。
立即学习“前端免费学习笔记（深入）”；
使用场景：你只需要切换几个静态模块，比如“首页 / 关于 / 联系”，那直接用对象字面量映射就足够了；但如果要传参、嵌套路由或复用组件，就得设计更结构化的路由表，例如：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
const routes = {
"/": () => renderHome(),
"/user": (params) => renderUser(params.id),
"/post": (params) => renderPost(params.slug)
};
此时每次 hashchange 触发后，先提取 path 和 search 部分，再调用对应函数并传入解析后的 params。
手动跳转必须用 location.hash 赋值
不能靠 <a href="#/about"> 点击跳转就完事——虽然它确实能改 hash 并触发 hashchange，但存在两个隐患：一是点击后页面会滚动到 id 匹配的元素（如果恰好有 id="about" 的 DOM）；二是无法控制是否加入历史栈（<a> 总是 push，没法 replace）。
正确做法是封装一个 go(path) 函数，统一管理跳转逻辑：
- 用
location.hash = "#/about"直接赋值，不会触发滚动 - 需要替换当前历史项时，用
history.replaceState配合location.hash（注意：这不会触发hashchange，得手动调用一次 handler） - 导航按钮应绑定
onclick="go('/about')"，而不是裸<a>
SEO 和分析埋点容易被忽略
hash 路由最大的硬伤是搜索引擎几乎不索引 # 后的内容，Google 曾经支持 #!（hashbang）协议，但早已弃用。如果你的页面需要被搜索收录，或者要对接 GA4 / 百度统计等工具，location.hash 变化默认不会上报 pageview。
必须手动补全：
- 在每次路由匹配成功后，调用
gtag("config", "G-XXX", { page_path: location.hash }); - 或用
dataLayer.push({ event: "virtualPageview", pagePath: location.hash });（适配 GTM） - 服务端渲染（SSR）或预渲染（prerender）方案对 hash 路由无效，这点常被低估
真正上线前，别只测“能切页”，要确认分享链接打开后内容是否一致、刷新后是否丢失状态、分析后台是否收到正确路径 —— 这些才是 hash 路由落地时最常翻车的地方。
