hash路由和history路由

一、基本概念

1. Hash 模式

原理：

• 通过 URL 中的 #（哈希值）来模拟路由，比如 http://example.com/#/home。
• 浏览器原生支持 hashchange 事件，当 # 后的内容变化时，页面不会刷新，但会触发路由切换。

特点：

• 兼容性好：支持所有浏览器（包括 IE8）。
• 服务端无压力 ：因为 # 后的内容不会发送到服务器，完全由前端处理。

示例：

// 监听路由变化
window.addEventListener('hashchange', () => {
  console.log('当前哈希:', location.hash); // 输出 "#/home"
});

2. History 模式

原理：

• 基于 HTML5 的 History API（pushState、replaceState），直接操作浏览器历史栈，URL 更简洁（如 http://example.com/home）。
• 需要服务端配合：因为路径是真实的，刷新页面时会向服务器请求该路径，需配置兜底返回 index.html。

特点：

• URL 美观 ：没有 #，更符合传统 URL 习惯。
• 需服务端支持：否则刷新页面会 404。

示例：

// 添加新路由记录
history.pushState({}, '', '/home'); // URL 变为 /home，无刷新

对比总结

对比点	Hash 模式	History 模式
URL 美观性	带 #，不美观	无 #，更简洁
兼容性	所有浏览器	需要 IE10+
服务端要求	无需配置	需配置兜底路由

选择建议：

• 如果需要兼容旧浏览器或快速搭建，用 hash。
• 如果追求美观且能控制服务端配置，用 history。

二、刷新页面情况

1. Hash 模式

• 不会刷新页面的情况：

  • 修改 # 后的哈希值（如 #/home → #/about），触发 hashchange 事件。
  • 调用 router.push() 或手动修改 location.hash。

• 会刷新页面的情况：

  • 直接修改 # 前的部分（如域名、路径、查询参数）：

    location.href = 'http://example.com/new-path#/home'; // 刷新页面

  • 手动刷新页面（F5 / 浏览器刷新按钮） ：

    页面会重新加载，但路由仍会匹配 # 后的内容（因为 # 后的部分不会发送到服务端）。

---

2. History 模式

• 不会刷新页面的情况：

  • 调用 history.pushState() 或 history.replaceState() 修改 URL。
  • 前端路由库（如 Vue Router、React Router）的导航方法（如 router.push('/about')）。

• 会刷新页面的情况：

  • 手动刷新页面（F5 / 浏览器刷新按钮） ：

    浏览器会向服务器请求当前 URL（如 http://example.com/about），若服务端未配置兜底路由（返回 index.html），会返回 404。

  • 直接输入 URL 并回车 ：

    等同于刷新页面，行为同上。

  • 修改非路由部分的 URL（如域名、协议、端口）：

    location.href = 'http://new-domain.com/about'; // 刷新并跳转

---

关键对比

操作	Hash 模式	History 模式
修改 # 后的部分	❌ 不刷新	-
调用 pushState/push	-	❌ 不刷新
手动刷新页面（F5）	⭕ 刷新	⭕ 刷新（需服务端支持）
直接输入 URL 回车	⭕ 刷新	⭕ 刷新（需服务端支持）
修改 URL 非路由部分（如域名）	⭕ 刷新	⭕ 刷新