JavaScript 实现前端路由核心依赖 window.history API 与 popstate 事件：用 pushState/replaceState 无刷新更新 URL，需手动监听 popstate 响应浏览器导航，并拦截 a 标签默认行为；服务端须配置 fallback 路由返回入口 HTML，否则直接访问子路径会 404。
JavaScript 实现路由功能，不依赖框架时核心靠 window.history 和 popstate 事件，但直接手写容易忽略浏览器前进/后退与 URL 同步的细节，导致状态错乱或页面白屏。
用 history.pushState() 替换 location.href 跳转
直接改 location.href 会触发整页刷新，而单页应用（SPA）需要无刷新切换视图。必须用 history.pushState() 或 history.replaceState() 修改 URL 并保留当前上下文。
-
pushState(state, title, url)：添加新历史记录，用户可点击后退返回上一状态；url必须同源，否则抛出SecurityError -
replaceState()不新增记录，适合表单提交后替换当前 URL，避免用户重复提交 -
state参数会被序列化进历史栈，可在popstate中取回，但不能传函数或 DOM 节点
监听 popstate 事件响应浏览器前进/后退
仅靠 pushState 改 URL 不会触发任何 JS 逻辑，必须显式监听 popstate 才能同步渲染内容。
- 该事件只在用户点击浏览器前进/后退按钮，或调用
history.back()等 API 时触发，**不会**在pushState或replaceState时触发 - 首次加载页面时不会触发
popstate，需手动读取location.pathname初始化路由 - 事件回调中通过
event.state可取到之前pushState存入的状态对象，但多数场景只需解析location.pathname即可
处理 a 标签默认跳转行为
HTML 中的 <a href="/user"></a> 点击仍会刷新页面，必须拦截。
立即学习“Java免费学习笔记（深入）”；
- 给所有路由链接统一加
data-router-link属性，或用 CSS 类（如.router-link），再用事件委托绑定点击 - 在点击处理器中调用
event.preventDefault()，再执行history.pushState()+ 手动渲染对应组件 - 注意：不要全局拦截所有
a，否则外链、带协议的 URL（如https://）、mailto:会被误拦
服务端需配合返回同一份 HTML 入口文件
前端路由本质是“URL 由 JS 解析”，所以当用户直接访问 /dashboard 或刷新页面时，请求已到达服务端——若服务端没配置，会返回 404。
- Node.js（Express）：用
app.get('*', (req, res) => res.sendFile(indexHtml))捕获所有路径 - Nginx：配置
try_files $uri $uri/ /index.html; - 注意：API 接口路径（如
/api/）不能被覆盖，需在服务端路由中优先匹配接口路径
真正难的不是 pushState 或 popstate 的调用，而是把 URL 解析、状态管理、异步组件加载、滚动复位、嵌套路由这些环节串成闭环——多数人卡在第一次手动渲染后，发现后退时组件没更新，或者 history.state 为空却还去取它。
