spa需要前端路由，是因为它只加载一次html，后续页面切换必须不刷新完成；前端路由通过history.pushstate或hashchange拦截默认跳转，实现url变化与dom局部更新解耦，同时保留浏览器导航能力。
SPA 需要前端路由，是因为它只加载一次 HTML，后续所有页面切换都必须在不刷新的前提下完成——而浏览器默认的导航行为会触发完整页面重载。前端路由就是用来接管这个过程，让 URL 变化和视图更新解耦，同时保留浏览器前进/后退、书签直连等原生能力。
为什么传统跳转在 SPA 里行不通
浏览器输入或点击一个普通链接（比如 /user/profile），默认会向服务器发起 HTTP 请求，等待返回全新 HTML 并整页渲染。这对 SPA 来说是个“中断”：
- 整个应用状态（如表单输入、滚动位置、组件内部数据）全部丢失
- JS 和 CSS 资源重复加载，性能浪费
- 白屏闪烁，体验接近多页应用（MPA），失去 SPA 意义
前端路由如何绕过默认行为
它不阻止用户操作，而是拦截并重写导航逻辑：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 点击链接时，用 event.preventDefault() 阻止默认跳转
- 调用 history.pushState() 或修改 location.hash 更新地址栏
- 不发请求，直接根据新路径匹配组件，动态渲染到
<div id="app"> 中<li>监听 <strong>popstate</strong>（History 模式）或 <strong>hashchange</strong>（Hash 模式）响应浏览器前进/后退</li> <h3>浏览器真实导航流程（带对比）</h3> <p>以访问 <strong>https://example.com/dashboard</strong> 为例：</p> <ul> <li> <strong>传统多页应用（MPA）</strong>：浏览器发起 GET /dashboard → 服务器返回完整 HTML → 浏览器清空 DOM、解析新 HTML、执行 JS → 全新页面</li> <li> <strong>SPA + 前端路由</strong>：浏览器发现这是已加载应用内的路径 → JS 拦截该动作 → 调用 pushState 记录新历史项 → 触发 popstate → 匹配路由表中 '/dashboard' 对应的组件 → 替换页面局部内容</li> </ul> <p>关键区别在于：SPA 的“导航”全程发生在客户端，不经过网络请求环节；URL 变化只是状态标记，不是资源请求指令。</p> <h3>两种模式对服务器的要求不同</h3> <p>这也是选择路由模式时不可忽略的实际约束：</p> <ul> <li> <strong>Hash 模式（<code>#）：URL 如https://example.com/#/dashboard。# 后内容不发送给服务器，所以任何子路径都能正常加载 index.html，无需服务端配合 -
History 模式（无 #）：URL 如
https://example.com/dashboard。用户直接访问该路径时，浏览器会向服务器请求/dashboard这个资源——如果服务器没配置 fallback（即所有未知路径都返回 index.html），就会返回 404
