单页应用（SPA）的核心是接管路由并按需更新视图而不刷新页面；需手动处理history.pushState、popstate事件、视图渲染与资源加载，服务端须配置所有路由返回同一HTML入口，否则直接访问会404。
单页应用（SPA）的核心不是“用什么框架”，而是“如何接管路由并按需更新视图而不刷新页面”。纯 JavaScript 实现 SPA 完全可行，但必须手动处理 history.pushState、popstate 事件、视图渲染和资源加载——跳过这些环节，就只是个带 hash 的切换器，不是真正意义上的 SPA。
用 history.pushState 替换 URL 而不刷新
浏览器原生支持无刷新跳转，但不会自动触发页面变化。你得自己监听、响应，并维护状态：
-
pushState第一个参数是任意状态对象（可为空），第二个是标题（通常忽略），第三个才是关键的 URL 路径，如pushState({}, '', '/user/123') - 调用后地址栏会变，但 DOM 不变，也不会触发
load或hashchange事件 - 必须配合
window.addEventListener('popstate', handler)处理前进/后退按钮 - 注意：服务端需配置所有路由返回同一 HTML 入口（否则直接访问 /user/123 会 404）
手动实现简易路由匹配与渲染
没有框架时，路由就是字符串匹配 + 函数执行。别写正则过度设计，先支持静态路径：
const routes = {
'/': () => renderHome(),
'/about': () => renderAbout(),
'/user/:id': (params) => renderUser(params.id)
};
function navigate(url) {
const path = new URL(url, location.origin).pathname;
// 简单匹配：只处理 /user/123 → 提取 id
const userMatch = path.match(/^\/user\/(\d+)$/);
if (userMatch) return routes['/user/:id'](userMatch);
const handler = routes[path];
if (handler) handler();
else renderNotFound();
}
真实项目中需扩展为路径解析器（如提取命名参数、通配符），但起步阶段硬编码更易调试。
立即学习“Java免费学习笔记（深入）”；
避免重复加载 JS/CSS 模块导致内存泄漏
每次“切换页面”若动态 import() 组件，要注意模块缓存和副作用：
-
import('./user.js')返回 Promise，成功后模块会被缓存，多次导入同一路径不会重复执行顶层代码 - 但如果模块内有全局事件监听器（如
document.addEventListener('click', ...)），未清理就会累积 - 推荐在组件卸载函数里移除监听器，或用
AbortController配合addEventListener(..., { signal }) - 慎用
eval或innerHTML渲染脚本标签——无法回收，且破坏 CSP
真正的难点不在跳转，而在状态同步：URL、滚动位置、表单输入、异步加载中的 loading 状态，都要手动对齐。框架帮你兜底的部分，裸写时每一处都是潜在的不一致点。
