哈希路由利用url中#后hash值变化驱动视图切换而不刷新页面，因浏览器原生规定仅hash变更不触发重载和http请求，并提供hashchange事件供监听；手写核心需三步：定义路由表、解析执行当前hash、绑定监听并首次执行。
哈希路由的本质，是利用浏览器 URL 中 # 后面那一段（即 hash 值）的变化来驱动视图切换，而整个过程不向服务器发请求、也不刷新页面。
哈希路由为什么能不刷新页面？
因为浏览器规定：只要 URL 改变的部分仅限于 hash（比如从 https://site.com/#/home 变成 https://site.com/#/about），就不会触发页面重载，也不会发起 HTTP 请求。这个行为是原生支持的，无需后端配合。
与此同时，浏览器会自动在 hash 变化时抛出 hashchange 事件——这就是我们监听和响应路由变化的入口。
手写一个最小可用的 hash 路由器
不需要框架，50 行以内就能搭出核心逻辑。关键三步：定义路由表、解析当前 hash、绑定监听并渲染。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
- 第一步：准备一个路由映射表，把路径字符串对应到渲染函数：
const routes = {
'/home': () => document.getElementById('app').innerHTML = '首页内容
',
'/about': () => document.getElementById('app').innerHTML = '关于页
',
'*': () => document.getElementById('app').innerHTML = '404
'
};
-
第二步：写一个路由匹配与执行函数，它读取当前 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()提取
怎么让链接点击也走路由？
普通 <a href="#/about"></a> 是可以触发 hash 变化的，但默认会滚动到页面内 id 匹配的元素。为避免干扰，建议：
- 给链接加
onclick="event.preventDefault(); location.hash='/about'" - 或者统一用 JS 控制：
<a href="#" data-to="/about"></a>，再用事件委托捕获点击
