17370845950

前端路由核心是history.pushState和hashchange API，前者修改URL不刷新但需服务端配合，后者通过#变化实现兼容性更好的路由。

前端路由靠的是 history.pushState 和 hashchange

单页面应用（SPA）不刷新页面就能切换视图，核心不是框架魔法，而是浏览器原生 API 的组合使用。history.pushState 可以修改 URL 且不触发跳转，hashchange 事件能监听地址栏 # 后的变化。两者都绕过了服务端请求，把路由控制权交还给前端。

现代框架如 React Router、Vue Router 底层都基于它们，只是做了封装和状态同步。注意：pushState 修改的是完整路径（如 /user/123），但需要服务端配合——否则用户直接访问该 URL 会 404；而 hash 模式（如 #!/user/123）天然兼容旧浏览器，且无需服务端配置，因为 # 后内容不会发给服务器。

手动实现一个最小可用的 history 路由

不用框架也能跑起来，关键在于三件事：拦截链接点击、响应 URL 变化、渲染对应组件。下面是最简逻辑：

function createRouter(routes) {
  function navigate(path) {
    history.pushState({ path }, '', path);
    render(path);
  }

  function render(path) {
    const route = routes.find(r => r.path === path);
    document.getElementById('app').innerHTML = route?.component || '404';
  }

  window.addEventListener('popstate', e => render(e.state?.path || location.pathname));
  document.addEventListener('click', e => {
    if (e.target.matches('a[data-router]')) {
      e.preventDefault();
      navigate(e.target.getAttribute('href'));
    }
  });

  // 初始化
  render(location.pathname);
}

// 使用示例
createRouter([
  { path: '/', component: '
Home
' },
  { path: '/about', component: '
About
' }
]);

注意点：

• data-router 是自定义属性，用于区分哪些 需要前端接管，避免误拦外部链接
• popstate 处理浏览器前进/后退，但不会触发初始加载，所以最后要手动调一次 render
• history.pushState 的第一个参数是 state 对象，会被塞进 popstate 事件的 e.state 中，别传 null

Hash 模式更简单但 URL 不够美观

如果不想配服务端或兼容 IE9，hash 是更稳妥的选择。它只监听 hashchange，URL 改变不触发页面刷新，也不影响服务端路由。

改写上面的 navigate 函数即可：

function navigate(path) {
  location.hash = path;
}

window.addEventListener('hashchange', () => {
  const path = location.hash.slice(1) || '/';
  render(path);
});

常见坑：

• location.hash 始终带 #，取值记得用 slice(1) 或 replace(/^#/, '')
• 首次进入页面时 hashchange 不触发，得手动执行一次渲染逻辑
• 某些 CMS 或静态托管（如 GitHub Pages）对 pushState 路由支持差，hash 是兜底方案

真实项目中必须处理的边界问题

手写路由容易忽略这些实际场景：

• 路由参数解析：比如 /user/:id 要匹配 /user/123 并提取 id=123，正则或 URLPattern（新版 Chrome 支持）更可靠，别硬写 split('/')
• 嵌套路由：子组件也需要知道自己的路径前缀，否则 useNavigate 或 Link 会拼错地址
• 滚动复位：从详情页返回列表页，应自动滚回顶部，需监听 popstate 后调用 window.scrollTo(0, 0)
• 404 捕获：pushState 后用户可能输入错误路径，前端要兜底渲染 404 页面，不能留白

路由看似只是改个 URL，但路径解析、状态同步、生命周期管理、服务端协作，每一块都容易出隐性 bug。越早意识到这些点，后期迁移或调试就越省力。