HTML5 History API单页路由核心是拦截导航、更新URL、响应历史变化；通过pushState修改地址栏、popstate监听前进后退、初始读取pathname匹配路径、服务端配置404回退至index.html。
用 HTML5 History API 构建无刷新单页应用路由系统，核心是三件事：拦截导航、更新 URL、响应历史变化。它不依赖框架，纯原生 JS 就能跑起来，关键是把 pushState、popstate 和 URL 解析串成闭环。
拦截点击并更新 URL
用户点链接时，阻止默认跳转，改用 JavaScript 控制：
- 给所有带 href 的导航链接加事件监听（比如
a[data-router]） - 调用
e.preventDefault()阻止页面刷新 - 提取目标路径（如
/about），执行history.pushState({ path: '/about' }, '', '/about') - 紧接着加载对应内容（渲染模板、请求数据、替换 DOM）
监听浏览器前进/后退
用户点后退或前进按钮时，URL 变了但页面不会自动反应，必须手动接管：
- 注册
window.addEventListener('popstate', handler) - 在 handler 中读取
event.state?.path；若为空（比如直接访问或刷新），就 fallback 到location.pathname - 根据路径重新加载内容，保持视图与 URL 同步
处理初始加载和 URL 匹配
页面首次打开或刷新时，history.state 是 null，不能只靠 popstate：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 在脚本启动时，主动读取
location.pathname，调用一次渲染逻辑 - 建议封装一个
router.match(path)函数，把路径映射到组件/模板/数据加载逻辑 - 支持简单参数解析，例如
/user/123可提取 id = 123，用于后续 fetch
服务端配合不可少
History 模式用的是真实路径（如 /dashboard），不是哈希（#dashboard）。这意味着用户直接输入或分享该 URL 时，服务器必须返回你的主 HTML 文件（通常是 index.html）：
- Nginx：配置
try_files $uri $uri/ /index.html; - Apache：启用 mod_rewrite，添加 RewriteRule 回退规则
- Vercel/Netlify：在
_redirects或vercel.json中设置 404 重定向到/
不复杂但容易忽略——只要这四步串通，你就有了一个轻量、可控、SEO 友好的前端路由基础。
