0Pricing
HTML Academy · 课时

基于哈希的路由与基于路径的路由

比较哈希路由与基于 pushState 的历史记录路由

基于哈希的路由与基于路径的路由 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

SPA URL 的两种策略

SPA 需要使用浏览器不会获取的 URL。有两种方案：基于哈希的方案使用片段（# 后面的所有内容），浏览器永远不会将其发送到服务器；基于路径的方案使用路径名，并结合 History 接口的相关技巧。

基于哈希的路由

URL 看起来像 https://example.com/#/about。服务器只会看到 /，并为每个 URL 提供相同的 HTML。客户端 JS 读取 location.hash，以决定要渲染哪个视图。它很简单，不需要服务器配置。

hashchange 事件

基于哈希的路由器会监听 hashchange 事件，该事件会在 location.hash 发生变化时触发。结合读取 window.location.hash，这就是客户端路由所需的全部接口，不涉及 History 接口。

window.addEventListener("hashchange", () => {
  const route = location.hash.slice(1) || "/";
  renderPage(route);
});

基于路径的路由

URL 看起来像 https://example.com/about，与服务器渲染的 URL 无法区分。History 接口的 pushState 可以在不重新加载页面的情况下更改路径；返回或前进时会触发 popstate；拦截点击则可以将 <a> 转变为 SPA 导航。

需要服务器配置

对于基于路径的路由，服务器必须为用户可能直接输入或刷新的任何路径返回 SPA 的 index.html。否则刷新 /about 会得到 404。配置方式是：先尝试查找文件，失败后回退到 index.html（Nginx 中的历史记录回退，以及 Vite 开发环境中的 vite-plugin-history-api）。

# Nginx config
location / {
  try_files $uri $uri/ /index.html;
}

搜索引擎优化与分享

搜索引擎和许多工具完全无法抓取哈希片段——位于 /#/about 的内容对旧式爬虫不可见（Google 可以通过无头渲染处理它，其他工具可能无法处理）。基于路径的 URL 可以正常抓取，因此在搜索引擎优化方面明显更好。

用户观感

哈希 URL 看起来明显“奇怪”——用户会注意到 #，可能不信任该链接，也可能忘记复制完整 URL。路径 URL 看起来和其他网页 URL 一样，符合用户预期。仅出于这一点，现代 SPA 几乎总会选择基于路径的路由。

实现复杂度

基于哈希：约 10 行 JS（hashchange 监听器加渲染）。基于路径：需要调用 pushState、监听 popstate、拦截链接点击，以及配置服务器端回退。哈希方案是最轻量的选择；路径方案需要更多基础设施，但能带来更好的用户体验。

静态托管注意事项

纯静态主机（GitHub Pages 的默认配置）无法执行服务器端回退，因此基于路径的路由在刷新时会失效。可选的解决办法包括：使用 404.html 重定向技巧、托管到 Netlify/Vercel（它们支持 SPA 回退），或者对于只能使用静态托管的项目接受基于哈希的方案。

混合方案

有些应用会混合使用两种方案：主 route 使用基于路径的方式，页面内的区段（模态框、标签页锚点）使用哈希。对于子页面状态，hashchange 事件仍会触发，与基于 History 的路由器互相补充，同时不污染主 URL。

在两者之间迁移

要从哈希迁移到路径：重写所有内部链接，添加服务器回退，将 hashchange 逻辑替换为 popstate，并使用一个只运行一次的启动脚本，将旧的哈希 URL 重定向到对应的路径 URL。该脚本调用 history.replaceState。

选择标准

以下情况请选择基于哈希：不支持重写的静态主机、无需搜索引擎优化的内部管理工具、嵌入式小部件。以下情况请选择基于路径：任何面向用户的应用、任何需要被搜索引擎收录的内容、任何要在社交媒体上分享的内容——这涵盖了大多数应用。

知识检查

为什么基于路径的 SPA 路由需要服务器配置，而基于哈希的路由不需要？

总结

基于哈希的路由（例如 /#/about 这样的 URL）不需要服务器配置，但搜索引擎优化效果较弱，URL 也不美观。基于路径的路由（例如 /about 这样的 URL）需要服务器回退到 index.html，但能生成简洁、适合搜索引擎优化且便于分享的 URL。现代面向公众的 SPA 使用基于路径的方案；静态托管或内部项目可能仍会为简单起见选择哈希方案。

常见问题解答

「基于哈希的路由与基于路径的路由」课时是免费的吗？

是的 — 「基于哈希的路由与基于路径的路由」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「基于哈希的路由与基于路径的路由」这节课中我会学到什么？

比较哈希路由与基于 pushState 的历史记录路由 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「基于哈希的路由与基于路径的路由」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. pushState 与 replaceState
  2. popstate 事件
  3. 基于哈希的路由与基于路径的路由
  4. Navigation API：现代浏览器
← 返回 HTML Academy