spa的核心是javascript接管路由、动态更新dom、服务端仅提供单一html入口；使用hash路由存在seo差、导航不精准等缺陷，现代spa必须用html5 history api并配置服务端fallback。
SPA 的核心不是“页面不刷新”，而是路由由 JavaScript 控制、DOM 动态更新、服务端只提供一个 HTML 入口。如果你用 fetch 拿数据再拼 innerHTML，但没接管 URL 路由，那不算真正 SPA。
为什么直接用 window.location.hash 不算合格 SPA 路由
它能改变 URL 且不刷新页面，但存在明显缺陷：
- history.pushState 和 history.replaceState 不触发 hashchange 事件
- SEO 友好性差（搜索引擎长期忽略 # 后内容）
- 无法使用浏览器前进/后退按钮精准跳转到非 hash 路由（比如从 /user/123 回到 /home）
- 服务端无法对 /user/123 做独立缓存或权限控制
所以现代 SPA 必须启用 HTML5 History API，并配合服务端配置 fallback（如 Nginx 返回 index.html）。
React Router v6 中 createBrowserRouter 和 createHashRouter 怎么选
二者底层路由机制不同，影响部署和行为：
- createBrowserRouter：依赖 history.pushState，URL 形如 /dashboard，需服务端支持 fallback
- createHashRouter：URL 形如 /#dashboard，无需服务端配合，但有前述 hash 缺陷
生产环境默认选 createBrowserRouter，除非你明确受限于静态托管平台（如 GitHub Pages 默认不支持 history fallback）。
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
<p>const router = createBrowserRouter([
{ path: '/', element: <Home /> },
{ path: '/post/:id', element: <Post /> },
]);</p><p><RouterProvider router={router} />Vue Router 的 createWebHistory 报错 “Uncaught SyntaxError: The requested module does not provide an export named 'createWebHistory'”
这是版本错配的典型信号：
- Vue Router v4（适配 Vue 3）才导出 createWebHistory
- Vue Router v3（Vue 2）用的是 createWebHistory 的旧名 createWebHistory？不，v3 根本没有这个函数，它用 mode: 'history' 配置对象
- 如果你用 Vite + Vue 3 但装了 vue-router@3，就会出现该错误
检查命令行输出：
- 运行 npm list vue-router 确认版本
- 若是 3.x，执行 npm install vue-router@4
- 同时确认 vue 是 ^3.0.0，否则不兼容
SPA 首屏白屏时间长，不是框架慢，是资源加载顺序错了
常见误操作：
- 把 main.js 放在 底部，但没加 type="module" 或 defer
- 使用 import() 动态路由但未配合 loading 状态或骨架屏
- CSS-in-JS 库（如 Emotion）在 JS 执行前无样式输出，导致 FOUC 或空白
关键修复点：
- 在 index.html 的 中预加载关键 chunk：<link rel="modulepreload" href="/assets/index.xxxx.js">
- 路由级代码分割后，用 Suspense 包裹 Outlet（React）或 <suspense></suspense>（Vue）
- 服务端返回的 index.html 应内联最小必要 CSS（如重置样式、首屏容器），避免阻塞渲染
SPA 的复杂点不在“怎么写组件”，而在于 路由生命周期与资源加载的耦合。很多人卡在刷新 404、SSR 衔接、动态 import 失败却归咎于框架本身——其实问题往往藏在构建配置或 HTML 模板里。
