JavaScript 的 History API 怎么操作路由-js教程-PHP中文网

history api 不实现路由，仅提供修改url和管理历史栈的底层能力；真正的路由逻辑需手动编写或借助框架，包括路径匹配、组件渲染和数据加载。

javascript 的 history api 怎么操作路由

JavaScript 的 History API 本身不“实现路由”，而是提供底层能力让你安全地修改 URL 并管理历史栈，真正的路由逻辑（比如匹配路径、渲染组件、加载数据）必须由你手动编写或借助框架完成。

它不是跳转工具，而是历史记录编辑器——改地址、留痕迹、传状态，但页面内容怎么变，得你自己定。

pushState 和 replaceState：改 URL 的两种方式

pushState(state, title, url)
在历史栈末尾新增一条记录。用户点「后退」会回到上一条。适合页面跳转，比如从首页进详情页。
- state 必须可序列化（不能含函数、DOM 节点）
- title 浏览器基本忽略，传 "" 就行
- url 必须同源，支持相对路径（如 /user/123）或绝对路径（如 /search?q=js）
replaceState(state, title, url)
替换当前历史项，不增加栈长度。用户点「后退」不会回到这个状态。适合修正当前 URL，比如：
- 表单提交后清理 ?step=2
- 登录后移除临时 token 参数
- 初始化时同步地址栏与真实状态

popstate 事件：响应浏览器导航的关键

它只在用户点击前进/后退按钮，或调用 history.back()/history.forward() 时触发，不是每次 push/replace 都触发。

绑定监听：window.addEventListener('popstate', handler)
从 event.state 读取之前存的状态对象（唯一可靠来源）
首次加载页面时 popstate 不会触发，必须主动检查 history.state 初始化视图
移动端 Safari 有延迟或丢失风险，建议加防抖，必要时 fallback 到 hashchange

示例：

window.addEventListener('popstate', (e) => {
  if (e.state?.page === 'detail') {
    renderDetail(e.state.id);
  }
});

// 页面加载后也要做一次
if (history.state?.page === 'detail') {
  renderDetail(history.state.id);
}

服务端配合：避免刷新 404

History API 改的是前端地址，但用户直接访问 /about 或刷新页面时，请求会发到服务端。如果服务器没配置，就会返回 404。

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。

下载

你需要让服务器对所有前端路由路径都返回 index.html（即 fallback），再由前端路由接管。常见做法：

Nginx：try_files $uri $uri/ /index.html;
Vite / Webpack Dev Server：启用 historyApiFallback: true
云服务（如 Vercel、Netlify）：配置 _redirects 或 routes.json

手写最小路由逻辑（无框架）

核心就三件事：

监听 URL 变化（popstate + 首次加载）
匹配路径并提取参数（如 /user/123 → { id: '123' }）
根据匹配结果更新 DOM 或加载数据

简单示例：

const routes = {
  '/': () => renderHome(),
  '/about': () => renderAbout(),
  '/user/:id': (params) => renderUser(params.id)
};

function route() {
  const path = location.pathname;
  for (let [pattern, handler] of Object.entries(routes)) {
    const keys = [];
    const regex = new RegExp(`^${pattern.replace(/:(\w+)/g, (_, key) => {
      keys.push(key); return '([^/]+)';
    })}$`);
    const match = path.match(regex);
    if (match) {
      const params = Object.fromEntries(
        keys.map((key, i) => [key, match[i + 1]])
      );
      handler(params);
      return;
    }
  }
  renderNotFound();
}

// 初始化 + 监听
route();
window.addEventListener('popstate', route);

不复杂但容易忽略细节。