在 Vue 单页应用开发中，常见的 SPA 实现方式有哪些？请分别阐述其原理和适用场景。
考察说明
考查对 SPA 单页应用实现机制的理解，以及不同实现方式的对比与选型能力。
回答思路
- 【回答框架 1】SPA 的核心特征是页面在初次加载后不整体刷新，通过前端路由和组件动态切换内容。常见实现方式包括 Hash 模式、History 模式和抽象路由模式。Hash 模式利用 URL 中 # 后的变化触发 hashchange 事件，不会向服务器发送请求，实现简单且兼容性好。
- 【回答框架 2】History 模式基于 HTML5 History API，通过 pushState 和 replaceState 修改浏览器历史记录，不改变 URL 的 hash 部分，配合 popstate 事件监听路由变化，需要服务器配置将所有路径重写到入口页面。
- 【回答框架 3】抽象路由模式适用于非浏览器环境，如 Node.js 或测试环境，通过内存中的路由表模拟浏览器历史，实现前后端同构。Vue 的 vue-router 提供了这三种模式，开发者可根据部署场景和技术栈选择。
- 【回答框架 4】在选择时需考虑兼容性、服务器支持和用户体验。若服务器无法配置重写，推荐使用 Hash 模式；若要求 URL 美观且服务器已配置，可选用 History 模式；同构应用或测试场景下使用抽象模式。
- 【关键点 1】SPA 通过前端路由实现页面切换，避免整页刷新。
- 【关键点 2】Hash 模式基于 location.hash 变化，无需服务器支持；History 模式依赖 HTML5 History API，需服务器配合。
- 【关键点 3】History 模式 URL 更美观，但生产环境需配置 fallback 到 index.html。
- 【关键点 4】vue-router 支持 hash、history、abstract 三种模式，默认使用 hash 模式。
- 【易错点 1】History 模式未配置服务器重写时，直接访问子路由会返回 404。
- 【易错点 2】hash 模式中的 hash 部分不会被发送到服务器，因此无法通过 URL 传递参数给后端。
- 【易错点 3】不同模式的切换需要重新配置，不能简单替换，否则可能导致路由失效。