HTML中如何使用URL的hash实现简单路由-html教程-PHP中文网

location.hash是最轻量、兼容性最好的前端路由方案，无需服务端配合或history.pushstate，通过监听hashchange事件并手动更新dom实现；需首次加载时主动匹配路由，正确解析hash值（如slice(1)），避免a标签跳转引发滚动，并注意seo与分析埋点需手动上报。

html中如何使用url的hash实现简单路由

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 或手写解析）。

使用场景：你只需要切换几个静态模块，比如“首页 / 关于 / 联系”，那直接用对象字面量映射就足够了；但如果要传参、嵌套路由或复用组件，就得设计更结构化的路由表，例如：

const routes = {
  "/": () => renderHome(),
  "/user": (params) => renderUser(params.id),
  "/post": (params) => renderPost(params.slug)
};

此时每次 hashchange 触发后，先提取 path 和 search 部分，再调用对应函数并传入解析后的 params。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

手动跳转必须用 location.hash 赋值

不能靠 <a href="#/about"></a> 点击跳转就完事——虽然它确实能改 hash 并触发 hashchange，但存在两个隐患：一是点击后页面会滚动到 id 匹配的元素（如果恰好有 id="about" 的 DOM）；二是无法控制是否加入历史栈（<a></a> 总是 push，没法 replace）。

正确做法是封装一个 go(path) 函数，统一管理跳转逻辑：

用 location.hash = "#/about" 直接赋值，不会触发滚动
需要替换当前历史项时，用 history.replaceState 配合 location.hash（注意：这不会触发 hashchange，得手动调用一次 handler）
导航按钮应绑定 onclick="go('/about')"，而不是裸 <a></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 路由落地时最常翻车的地方。