前端路由双雄传：Hash vs. History

你是否曾经困惑：为什么单页应用（SPA）在不刷新页面的情况下，URL还能悄悄变？今天，我们就来揭开前端路由的神秘面纱，带你用最通俗的方式理解 哈希路由 和 history路由 的实现原理！🚀

一、问题背景

在传统多页应用中，每次URL变化都会导致页面刷新，体验就像"翻书"一样。而在SPA中，我们希望页面内容能根据URL变化而切换，但又不想刷新整个页面。于是，前端路由应运而生。

问题：

如何感知URL变化？
如何让页面内容与URL同步？

二、哈希路由（Hash Routing）

1. 原理揭秘

哈希路由利用 URL 的 hash 部分（即 # 及其后内容）来实现前端路由切换。hash 变化不会导致页面重新加载，浏览器会触发 hashchange 事件，前端即可根据 hash 值渲染对应内容。

核心机制：

监听hashchange事件，感知URL变化
根据hash值渲染对应组件

2. 代码示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hash 路由示例</title>
  <style>
    nav a { margin: 0 10px; }
    #router-view { margin-top: 20px; }
  </style>
</head>
<body>
  <nav>
    <a href="#/home">首页</a>
    <a href="#/about">关于</a>
    <a href="#/contact">联系</a>
  </nav>
  <div id="router-view"></div>
  <script>
    const routes = [
      { path: '/home', component: () => '<h2>首页内容</h2>' },
      { path: '/about', component: () => '<h2>关于我们</h2>' },
      { path: '/contact', component: () => '<h2>联系方式</h2>' }
    ];
    const routerView = document.getElementById('router-view');
    function render() {
      const hash = location.hash.slice(1) || '/home';
      const route = routes.find(r => r.path === hash);
      routerView.innerHTML = route ? route.component() : '<h2>404 Not Found</h2>';
    }
    window.addEventListener('hashchange', render);
    window.addEventListener('DOMContentLoaded', render);
  </script>
</body>
</html>

3. 生活化类比

哈希路由就像一本厚厚的笔记本，每一页的右上角都贴着一个彩色标签（#）。你在翻阅时，只需看标签就能快速定位到想要的章节，无需重新打开整本书。这里的 #，就像是每个标签的颜色或编号，帮助你一眼找到目标内容。
在本例中，URL 中的 #/about、#/home 等，就像是你在笔记本上贴的"关于""首页"等标签。每次点击导航链接，页面不会整体刷新（不会重新翻开书），而是直接跳转到带有对应标签的那一页内容，实现了高效的内容切换和定位。

4. 常见问题

首次进入页面或刷新时，如果没有监听DOMContentLoaded，页面可能是空的，需要手动点击导航才显示内容。

5. 效果展示

三、History路由（History Routing）

1. 原理揭秘

History路由利用了浏览器的 history对象 ，通过pushState、replaceState等API修改URL而不刷新页面。相比哈希路由，URL 更加美观，无需 #。

核心机制：

使用pushState修改URL
监听popstate事件，感知前进/后退
根据location.pathname渲染对应组件

2. 代码示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>History 路由示例</title>
  <style>
    nav a { margin: 0 10px; }
    #router-view { margin-top: 20px; }
  </style>
</head>
<body>
  <nav>
    <a href="/home" data-link>首页</a>
    <a href="/about" data-link>关于</a>
    <a href="/contact" data-link>联系</a>
  </nav>
  <div id="router-view"></div>
  <script>
    const routes = [
      { path: '/home', component: () => '<h2>首页内容</h2>' },
      { path: '/about', component: () => '<h2>关于我们</h2>' },
      { path: '/contact', component: () => '<h2>联系方式</h2>' }
    ];
    const routerView = document.getElementById('router-view');
    function render(path) {
      const route = routes.find(r => r.path === path);
      routerView.innerHTML = route ? route.component() : '<h2>404 Not Found</h2>';
    }
    function onLinkClick(e) {
      if (e.target.matches('[data-link]')) {
        e.preventDefault();
        const path = e.target.getAttribute('href');
        history.pushState({}, '', path);
        render(path);
      }
    }
    window.addEventListener('popstate', () => render(location.pathname));
    document.body.addEventListener('click', onLinkClick);
    window.addEventListener('DOMContentLoaded', () => render(location.pathname));
  </script>
</body>
</html>

3. 生活化类比

想象你住在一套超大的智能别墅，走廊上有无数个房间，每个房间都装修成不同风格（URL）。你每进一个房间，都会在手里的"穿越记事本"（history 栈）上写下房间名和进门时间，顺便画个小表情。想回到之前的房间？不用穿越时空，只需翻翻记事本，瞬间回到那一页，房间里的家具、气味、甚至你上次吃了一半的薯片都还在原地。
你可以一路向前探索新房间，也可以"后退"回到厨房找回刚才没喝完的奶茶。每次 pushState 就像新开一扇门，popstate 就像倒带回忆，整个过程无比丝滑，邻居都看不出你其实一直没离开这栋房子。

4. 常见问题

直接输入URL或刷新页面时，服务器需要有对应的资源，否则会404。

5. 效果展示

四、对比分析

特性	哈希路由	History路由
URL美观	不美观（带#）	美观（无#）
刷新/直达支持	支持	需后端配合
兼容性	老浏览器也支持	需HTML5支持
实现复杂度	简单	稍复杂
SEO友好	差	好（需后端支持）

五、总结与最佳实践

哈希路由适合静态页面、无需后端配合的场景，简单易用，兼容性好。
History路由适合需要美观URL和SEO的场景，但需要后端支持。
两者本质都是"前端自己决定去哪间房"，只是通知方式不同。

技术的世界没有绝对的对错，只有最适合你的方案！希望你在前端路由的江湖中，能找到属于自己的武功秘籍！😄✨