javascript哈希路由是什么_如何实现单页面应用的路由？-js教程-PHP中文网

javascript哈希路由是什么_如何实现单页面应用的路由？

夜晨

发布： 2025-12-21 20:41:56

原创

246人浏览过

JavaScript哈希路由是利用URL中#后hash值实现SPA导航的机制，不触发页面刷新，通过监听hashchange事件并解析location.hash来渲染对应视图，兼容IE8+且无需服务端配置，但SEO差、URL不美观。

javascript哈希路由是什么_如何实现单页面应用的路由？

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 或兼容老浏览器的场景，但也有明显局限：

灵光

蚂蚁集团推出的全模态AI助手

1635

查看详情

立即学习“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 模式；若求稳、要快速上线或支持旧环境，哈希路由仍是可靠选择。

以上就是javascript哈希路由是什么_如何实现单页面应用的路由？的详细内容，更多请关注php中文网其它相关文章！