SPA需路由控制、视图更新、状态管理协同实现，核心是history.pushState改URL不刷新、popstate监听前进后退、动态DOM替换更新内容。
JavaScript 构建单页面应用（SPA）不是靠某个“框架开关”一键开启，而是由路由控制、视图更新、状态管理三者协同实现；没用框架也能做，但绕不开 history.pushState、window.addEventListener('popstate') 和动态 DOM 替换这三个核心动作。
用 history.pushState 替换 URL 而不刷新页面
这是 SPA 的起点。直接修改 location.href 或 location.assign() 会触发完整重载，必须用 History API。
-
history.pushState(state, title, url)第三个参数是相对路径（如'/user/123'），浏览器地址栏会变，但不会发请求 -
state对象会被存入历史记录栈，后续通过event.state取出，建议放轻量数据（如{page: 'user', id: 123}） - 不要传绝对 URL（如
'https://site.com/user/123'），会报SecurityError - 调用后需手动更新页面内容，API 本身不渲染任何东西
监听浏览器前进/后退并响应视图变化
用户点返回按钮或调用 history.back() 时，页面不会自动重绘——你得自己接住这个事件。
- 必须监听
popstate事件：window.addEventListener('popstate', e => { render(e.state) }) -
e.state是之前pushState传入的 state 对象，但首次加载页面时为null，需单独处理 - 不要在
popstate里再调用pushState，否则可能陷入循环（例如渲染失败又推一次错误状态） - 移动端某些 WebView 对
popstate触发不一致，可加一层setTimeout防抖（仅调试时必要）
用 innerHTML 或 replaceChildren() 动态更新视图
没有框架时，DOM 更新靠手动操作。别用 document.write()（已过时且清空整个文档），也别对整个 body 做 innerHTML = ...（会丢失绑定事件、焦点、音频播放等状态）。
立即学习“Java免费学习笔记（深入）”；
- 推荐定位到一个容器节点（如
document.getElementById('app')），然后用el.replaceChildren(...)（现代写法）或el.innerHTML = htmlString - 如果 HTML 字符串含用户输入内容，务必先用
textContent或转义函数处理，否则有 XSS 风险 - 事件监听要重新绑定（除非用事件委托），或者把逻辑封装成可重入的
initPage()函数 - 避免高频触发（如滚动中频繁 pushState + render），加节流或只在 URL 变化后才更新
为什么不用 hash 路由而选 history 模式？
hash 路由（#user/123）兼容老浏览器，但缺点明显：SEO 不友好、URL 不美观、服务端无法区分不同 hash（导致部署到子路径时 404）。
- 用
history模式必须配服务端支持：所有前端路由路径都返回同一份index.html（否则刷新页面 404） - Nginx 示例配置：
location / { try_files $uri $uri/ /index.html; } - Vercel/Netlify 等平台默认支持，但 GitHub Pages 需额外配置
404.html回退 - 开发时用
live-server或vite自带的 SPA fallback，无需手动配
真正难的不是写出能切换页面的代码，而是让每个路由入口都正确恢复滚动位置、保持表单草稿、处理异步加载失败、与第三方库（如地图、富文本）共存——这些细节不在 API 文档里，而在每次用户点击后的真实反馈中。
