SPA 导航 vs 传统跳转：一次 Rust + WASM 全栈项目的实战踩坑 项目版本: 基于 StaticFlow master 分支 (2026-02) 技术栈: Rust + Yew + WebAssembly + Trunk1. 问题：搜索一下，音乐就没了 StaticFlow 是一个 Rust 全栈博客系统，前端用 Yew 框架编译为 WebAssembly 运行在浏览器中。它有一个全局音乐播放器——用户可以一边听歌一边浏览文章、搜索内容。 但在实际使用中发现了一个严重问题：用户正在播放音乐时，点击搜索或切换搜索模式，音乐立刻停止，迷你播放器消失，整个页面白屏重载。 这不是 bug，而是一个架构层面的认知偏差——我们在 SPA 里用了传统多页应用的导航方式。 📌 本文范围: 聚焦 SPA 导航与传统 <a href> 跳转的本质区别，以及在 WASM SPA 中这个差异带来的放大效应。同时延伸讨论 SEO 与 SPA 的关系，以及前端流式通信协议（SSE vs WebSocket）的选型。不涉及 SSR、SSG 等服务端渲染方案。2. 两种导航方式的本质区别 在深入代码之前，先建立一个清晰的心智模型。2.1 对比总览graph LR subgraph traditional["传统 href 跳转"] A1[用户点击链接] --> A2[浏览器发起 HTTP 请求] A2 --> A3[服务器返回新 HTML] A3 --> A4[旧页面卸载 · JS 内存清零] A4 --> A5[新页面加载 · 重新初始化] end subgraph spa["SPA pushState 导航"] B1[用户点击链接] --> B2[JS 拦截 · preventDefault] B2 --> B3[pushState 修改地址栏] B3 --> B4[前端路由匹配新组件] B4 --> B5[局部 DOM 更新 · 状态保留] end style traditional fill:none,stroke:#ef4444,stroke-width:2px,stroke-dasharray:5 5 style spa fill:none,stroke:#22c55e,stroke-width:2px,stroke-dasharray:5 5 style A1 fill:#fff,stroke:#f97316,stroke-width:2px,color:#1a1a1a style A2 fill:#fed7aa,stroke:#f97316,stroke-width:2px,color:#1a1a1a style A3 fill:#fdba74,stroke:#ea580c,stroke-width:2px,color:#1a1a1a style A4 fill:#f87171,stroke:#dc2626,stroke-width:2px,color:#fff style A5 fill:#ef4444,stroke:#b91c1c,stroke-width:2px,color:#fff style B1 fill:#fff,stroke:#3b82f6,stroke-width:2px,color:#1a1a1a style B2 fill:#bfdbfe,stroke:#3b82f6,stroke-width:2px,color:#1a1a1a style B3 fill:#93c5fd,stroke:#2563eb,stroke-width:2px,color:#1a1a1a style B4 fill:#60a5fa,stroke:#2563eb,stroke-width:2px,color:#fff style B5 fill:#22c55e,stroke:#16a34a,stroke-width:2px,color:#fff | 维度 | 传统 <a href> | SPA pushState | |------|----------------|-----------------| | 网络请求 | 浏览器向服务器请求完整 HTML | 无请求（或仅 API 数据请求） | | 页面生命周期 | 旧页面 unload → 新页面 load | 同一页面，组件切换 | | JS 内存状态 | 全部丢失 | 完整保留 | | DOM 元素 | 全部销毁重建 | 仅变化部分更新 | | 地址栏 URL | 浏览器原生更新 | history.pushState() 更新 | | 后退按钮 | 浏览器原生处理 | 监听 popstate 事件 | | 白屏时间 | 有（等待新页面加载） | 无（即时切换） |2.2 在…