单页应用本质是路由控制而非框架选择，核心是用history.pushState拦截URL变化、动态更新视图且不刷新页面，并通过popstate监听前进后退，服务端需配置fallback至index.html避免404。
单页应用本质是路由控制而非框架选择
不用 React 或 Vue 也能做 SPA，核心是拦截 URL 变化、动态更新视图、不触发整页刷新。浏览器原生 history.pushState() 和 popstate 事件就足够支撑最小可行 SPA。
常见错误是过早引入框架或路由库，结果卡在配置里——其实先手写一个三行路由切换逻辑，比调通 react-router-dom 的 BrowserRouter 更快验证想法。
用 pushState 替换 URL 但不刷新页面
调用 history.pushState() 时，浏览器地址栏会变，但不会请求新 HTML；注意它不触发 load 事件，只触发 popstate（前进/后退时）。
-
history.pushState({page: 'about'}, '', '/about')：第三个参数是新路径，必须同源，且不能跨域 - 第二个参数（title）目前多数浏览器忽略，可传空字符串
- 第一个参数是 state 对象，会在
popstate事件的event.state中还原 - 直接修改
location.href或location.assign()仍会刷新，别混用
监听浏览器前进/后退并响应视图更新
popstate 是唯一可靠监听历史跳转的事件，但它只在用户点前进/后退按钮、或调用 history.back() 时触发，不响应 pushState 调用本身。
立即学习“Java免费学习笔记（深入）”；
所以完整流程是：pushState → 手动更新视图 → 用户点后退 → popstate → 根据 event.state 或 location.pathname 再次更新视图。
window.addEventListener('popstate', (event) => {
const path = location.pathname;
if (path === '/home') renderHome();
else if (path === '/about') renderAbout();
});
服务端需 fallback 到 index.html
SPA 的致命坑：用户直接访问 /about，服务端找不到该路径的静态文件，返回 404。解决办法不是前端修，而是服务端配置。
- Nginx：加
try_files $uri $uri/ /index.html; - Vercel：默认支持，无需额外配置
- 本地开发用
serve -s build（serve的-s参数启用 SPA 模式） - Node.js Express：用
app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'index.html')))
没配 fallback，本地 file:// 打开可能暂时正常，一上真实服务器立刻 404——这个点最容易被忽略。
