请对比 Vue Router 中 hash 模式与 history 模式在实现原理、URL 表现、服务端支持要求及适用场景上的差异。
考察说明
考察对 Vue Router 两种路由模式原理及实际应用差异的理解。
回答思路
- 【回答框架 1】hash 模式基于 URL 的 hash 部分（# 后的内容）实现路由切换。hash 变化不会触发浏览器向服务器发送请求，因此不需要服务端额外配置，且刷新页面时仍能保持当前路由。其 URL 形如 example.com/#/user，美观度稍差，但对旧浏览器兼容性好。
- 【回答框架 2】history 模式基于 HTML5 History API，通过 pushState 和 replaceState 修改浏览器历史记录，URL 形如 example.com/user，更美观且更符合常规路径。但由于这类修改不会产生真实请求，刷新或直接访问深层路径（如 /user/123）时，若服务器未配置回退（通常将所有路由重写到 index.html），会返回 404。
- 【回答框架 3】部署差异是核心：hash 模式因不依赖服务端，适合静态托管或无法配置服务端重写的场景；history 模式要求服务端支持 SPA 回退（如 nginx 的 try_files 或 Node 中间件），适用于有服务端控制权的生产环境。
- 【回答框架 4】其他差异：history 模式在服务端渲染（SSR）或预渲染场景更友好，因为 URL 无特殊字符；hash 模式在兼容性上更优（不支持 History API 的旧浏览器仍可用）。
- 【回答框架 5】实际选择应结合部署环境、SEO 需求和兼容性要求：若需 SEO 或干净 URL 且能配置服务端，选 history；否则用 hash 以降低运维复杂度。
- 【关键点 1】hash 模式不刷新页面且无需服务端支持，刷新或直达不产生 404；history 模式依赖 History API 且需要服务端配置回退。
- 【关键点 2】history 模式 URL 更美观，但初次加载或刷新深层路径可能 404；hash 模式 URL 带 # 号。
- 【关键点 3】history 模式更利于 SEO 和服务端渲染，但要求服务端所有路由重写回应用入口。
- 【易错点 1】不能混淆 hash 模式与前端路由刷新不发送请求的特性，两者机制不同但易被误统一。
- 【易错点 2】使用 history 模式却未配置服务端回退，是导致线上 404 的常见原因。
- 【易错点 3】不要认为 history 模式一定完全无缺点，其依赖浏览器 History API，旧浏览器或特殊环境可能不支持。