什么是 SPA 路由原理：用大白话讲透 Hash 模式与 History 模式区别

SPA路由原理是通过JavaScript拦截URL变化并动态渲染内容而不刷新页面；Hash模式利用URL哈希值实现兼容性好但URL不美观，History模式用HTML5 API修改真实路径需服务端配合兜底。

SPA 路由原理，说白了就是：**让一个网页“假装”有多个页面，URL 变了，但页面不刷新，内容却能换**。它不是靠服务器返回新 HTML，而是靠 JavaScript 拦截 URL 变化，再动态渲染对应的内容。

Hash 模式：靠“#号”打掩护

浏览器有个老规矩：URL 里 # 后面的内容（叫 hash）不会发给服务器，改它也不会刷新页面，而且浏览器会自动记进历史记录——前进后退都管用。

所以 Hash 模式就利用这点：

• 把路由路径写在 # 后面，比如 https://site.com/#/home、https://site.com/#/about
• 监听 hashchange 事件，一旦 # 后面变了，就立刻读取新路径，渲染对应组件
• 跳转时不用发请求，直接改 location.hash 就行

优点是简单、兼容性极好（IE8 都能跑），服务端完全不用改配置；缺点也很明显：URL 带 #，不美观，对 SEO 不太友好。

History 模式：用 HTML5 API “正大光明”改地址栏

HTML5 提供了 pushState 和 replaceState 方法，允许 JS 在不刷新的前提下，**真正修改整个 URL 路径**，比如从 https://site.com/ 变成 https://site.com/about，地址栏干干净净，没有 #。

它靠的是：

• 点击链接时，先 e.preventDefault() 拦住默认跳转
• 调用 history.pushState() 更新地址栏并存入历史栈
• 监听 popstate 事件，捕获用户点前进/后退的操作

好处是 URL 更专业、利于 SEO；但有个硬性要求：用户直接访问 /about 这个地址时，服务端必须返回 index.html，否则会 404——因为 SPA 只有一个 HTML 文件，所有路径都要“兜底”到它。

关键区别一句话总结

Hash 模式改的是 URL 的“备注栏”（#后面），浏览器不告诉服务器；History 模式改的是 URL 的“正经路径”，需要服务器配合兜底，否则就断联。