History-API

1. History API 概述

History API 允许 JavaScript 操作浏览器的历史记录栈，实现无刷新页面导航。

2. 导航方法

history.back(); // 后退
history.forward(); // 前进
history.go(-2); // 后退2步

pushState 与 replaceState

// 添加新历史条目
history.pushState({ page: 'about' }, '', '/about');

// 修改当前历史条目
history.replaceState({ page: 'home' }, '', '/home');

注意：pushState 和 replaceState 不会触发 popstate 事件。

3. popstate 事件

window.addEventListener('popstate', (event) => {
  if (event.state) renderPage(event.state.page);
});

4. SPA 路由实现

class Router {
  constructor() {
    this.routes = {};
    window.addEventListener('popstate', () => this.resolve());
    document.addEventListener('click', (e) => {
      const link = e.target.closest('a[href]');
      if (link && link.origin === location.origin) {
        e.preventDefault();
        this.navigate(link.pathname);
      }
    });
  }
  addRoute(path, handler) {
    this.routes[path] = handler;
    return this;
  }
  navigate(path, state = {}) {
    history.pushState(state, '', path);
    this.resolve();
  }
  resolve() {
    (this.routes[location.pathname] || this.routes['*'])?.(history.state);
  }
}

5. 注意事项

• URL 必须同源
• 状态对象有大小限制（约 640KB）
• SPA 需服务端配置所有路由返回 index.html