javascript如何创建单页面应用【教程】

单页应用本质是路由控制而非框架选择，核心是用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——这个点最容易被忽略。