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

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

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

标签： vue react javascript java html 前端 seo 浏览器 路由器 路由 win 搜索引擎 区别