纯HTML无法实现真正的SPA，因其是静态语言，不支持运行时状态管理、路由监听或局部刷新，点击链接必触发全量重载，而SPA需JS通过pushState、fetch和DOM操作模拟无刷新切换。
纯 HTML 无法实现真正的 SPA，必须配合 JavaScript 控制路由和视图更新；所谓“HTML 做 SPA”本质是用 history.pushState + fetch + DOM 操作模拟页面切换。
为什么不能只靠 HTML 实现 SPA
HTML 是静态标记语言，不支持运行时状态管理、路由监听或局部刷新。浏览器每次点击 <a href="/about"> 默认触发完整页面加载（HTTP 请求 → HTML 解析 → 全量重绘），这与 SPA 的“不刷新页面”目标直接冲突。
- 没有 JS 时，
<nav><a href="/home">首页</a></nav>点击必然跳转并重载整个页面 -
location.hash虽可变化且不重载，但需手动监听hashchange事件才能响应 -
history.pushState和replaceState必须由 JS 主动调用，HTML 标签本身不触发它们
核心三步：拦截链接 + 更新 URL + 渲染视图
典型 SPA 行为链：用户点链接 → JS 阻止默认跳转 → 修改地址栏（不刷新）→ 加载对应内容 → 替换 <main> 内部 DOM。
- 用
document.addEventListener('click', e => { if (e.target.matches('nav a')) { e.preventDefault(); ... } })拦截所有导航链接 - 调用
history.pushState({page: 'about'}, '', '/about')更新 URL，注意第三个参数必须是同源路径 - 用
fetch('/about.html')或解析本地<template id="about">获取内容，再document.querySelector('main').innerHTML = ... - 必须监听
popstate事件处理浏览器前进/后退按钮，否则这些操作会失效
容易被忽略的兼容性与陷阱
看似简单，但上线后高频出问题的点往往藏在细节里：
立即学习“前端免费学习笔记（深入）”；
-
pushState后服务端未配置 fallback：用户直接访问/dashboard会 404，需 Nginx 返回index.html（非重定向） - SEO 友好性差：搜索引擎爬虫可能不执行 JS，导致只抓到空壳 HTML；服务端渲染（SSR）或静态生成（SSG）才是补救方案
- 页面标题没同步更新：
pushState不改document.title，需手动设置，否则历史记录里全是“首页” - 滚动位置丢失：浏览器原生跳转会自动恢复滚动，SPA 需在
popstate中调用window.scrollTo(0, 0)或记录上一页位置
现代框架封装了什么，但底层仍是这几行 JS
Vue Router 的 router-link、React Router 的 <Link>、SvelteKit 的 <a> 自动拦截，背后都是同一套逻辑：阻止默认行为 + pushState + 视图更新。你手写一个最小可用 SPA，50 行 JS 就够——但真实项目里，路由嵌套、参数解析、懒加载、守卫逻辑、错误边界这些，才是真正吃掉开发时间的地方。
