96. History API 与前端路由

本节目标：理解 History API 的基本操作，明白单页应用（SPA）如何通过 History API 模拟页面切换。

什么是 History API

以前操作浏览器历史记录只有 history.back()、history.forward() 和 history.go()。HTML5 新增了三个关键方法，可以在不刷新页面的情况下修改浏览器地址栏和调用历史记录。

核心 API

pushState：添加历史记录

history.pushState(state, title, url);

state：一个对象，存储与这个历史记录关联的数据
title：页面标题（大多数浏览器忽略，传空字符串即可）
url：新的 URL（只改地址栏，不刷新页面）

history.pushState({ page: "about" }, "", "/about");

点”前进到 /about”，地址栏变了，但页面不刷新。

replaceState：替换当前记录

history.replaceState({ page: "home" }, "", "/");

和 pushState 类似，但替换当前记录，不新增一条。

popstate 事件：点击后退/前进

用户点浏览器后退或前进按钮时触发。

window.addEventListener("popstate", function (event) {
  console.log("state:", event.state);
  console.log("当前地址:", location.pathname);
  // 根据地址加载对应内容
  loadPage(location.pathname);
});

单页应用路由原理

Vue Router、React Router 底层就靠 History API：

点击链接时：pushState 改地址栏
拦截点击：阻止默认跳转
手动加载：用 Ajax 或 JS 切换内容
点后退：触发 popstate，根据地址恢复对应页面

迷你路由实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    .page { display: none; }
    .page.active { display: block; }
  </style>
</head>
<body>
  <nav>
    <a href="/" onclick="navigate(event, '/')">首页</a>
    <a href="/about" onclick="navigate(event, '/about')">关于</a>
    <a href="/contact" onclick="navigate(event, '/contact')">联系</a>
  </nav>

  <div id="home" class="page active">首页内容</div>
  <div id="about" class="page">关于页面内容</div>
  <div id="contact" class="page">联系页面内容</div>

  <script>
    function navigate(event, path) {
      event.preventDefault(); // 阻止默认跳转
      history.pushState({ path }, "", path); // 改地址栏
      showPage(path); // 切换内容
    }

    function showPage(path) {
      // 隐藏所有页面
      document.querySelectorAll(".page").forEach(function (div) {
        div.classList.remove("active");
      });
      // 显示对应页面
      const pageId = path === "/" ? "home" : path.slice(1);
      const el = document.getElementById(pageId);
      if (el) el.classList.add("active");
    }

    // 点后退/前进时恢复页面
    window.addEventListener("popstate", function (e) {
      const path = e.state ? e.state.path : "/";
      showPage(path);
    });
  </script>
</body>
</html>

Note

这是简化版原理演示。实际路由库还要处理嵌套路由、动态参数、守卫逻辑、滚动恢复等复杂场景。

实际用途

History API 主要用在：

单页应用（SPA）的路由系统：Vue Router、React Router 底层
搜索条件保存：筛选条件变地址栏，刷新后恢复
标签页切换：用 URL 记录当前标签，方便分享

注意事项

同源限制：URL 不能跨域
服务器配置：生产环境需要配置服务器，让所有路径都返回同一个 HTML 页面
SEO 影响：SPA 的 URL 是”假”的，爬虫可能抓不到内容。需要 SSR 或预渲染解决
state 大小：state 对象会被序列化存储，大约 640KB 上限

Tip

自己写路由很累。实际项目直接用 Vue Router 或 React Router，不要重复造轮子。理解原理就好。