前端路由扫盲：揭开hash路由和history路由的神秘面纱

前端

2023-12-12 20:10:41

单页应用（SPA）的崛起：前端路由的基石

随着互联网的迅猛发展，单页应用（SPA）已成为现代网络开发的主流。SPA 仅在初始化时加载页面，随后所有页面跳转都在当前页面内完成，无需重新加载。这带来了无缝的用户体验和令人印象深刻的加载速度。

前端路由：SPA 的灵魂

前端路由是 SPA 的中流砥柱，负责管理内部页面跳转。前端路由有两种主要模式：哈希路由和历史路由。

哈希路由：简单易行，兼容性强

哈希路由是最古老的前端路由模式。它通过在 URL 中添加哈希值来实现页面跳转。例如，当您点击一个链接时，浏览器会将该链接的哈希值添加到 URL 中，并触发相应的页面跳转。

哈希路由具有以下优点：

简单易用： 实现哈希路由非常简单，只需要在 URL 中添加一个哈希值即可。
兼容性强： 哈希路由与所有浏览器兼容，即使是最古老的浏览器也可以使用。

历史路由：无刷新跳转，体验流畅

历史路由是前端路由的最新模式。它通过浏览器提供的 history API 来实现页面跳转。历史路由不会在 URL 中添加哈希值，因此页面跳转不会引起页面的刷新。

历史路由具有以下优点：

无刷新跳转： 历史路由的页面跳转不会引起页面的刷新，从而提供了无缝的用户体验。
安全性增强： 历史路由不会在 URL 中暴露敏感信息，因此更安全。

哈希路由与历史路由的比较

特性	哈希路由	历史路由
实现方式	在 URL 中添加哈希值	通过浏览器提供的 history API
页面跳转	引起页面刷新	不引起页面刷新
兼容性	与所有浏览器兼容	仅与支持 history API 的浏览器兼容
安全性	较弱	较强

哈希路由的实现示例

// 监听 hashchange 事件
window.addEventListener('hashchange', function() {
  // 获取当前的哈希值
  const hash = window.location.hash;

  // 根据哈希值跳转到相应的页面
  if (hash === '#page1') {
    // 跳转到页面 1
  } else if (hash === '#page2') {
    // 跳转到页面 2
  }
});