Vue Router 的 hash 和 history 模式有什么区别？刷新为什么会 404？

知识点详解：刷新时，路由控制权先交给谁

同一个地址，点击和刷新走的入口不同

假设网站有 /articles/123 详情页。用户先打开首页，再点击文章链接，前端已经运行，可以修改地址并渲染详情组件。

如果用户把这条链接复制到新窗口，浏览器第一步会请求服务器的 /articles/123。前端脚本此时还没加载，不可能先替服务器回答。

静态服务器如果只找同名文件，而磁盘上没有这个目录或文件，就会返回 404。这时你把 Vue 路由配置改得再完整，也无法让尚未运行的脚本接住请求。

hash 把路由留在片段里，history 把路径交给服务器

地址示例	服务器收到的路径	前端解析
https://example.com/#/articles/123	/	hash 中的文章路径
https://example.com/articles/123	/articles/123	正常 pathname

URL 的片段不会作为 HTTP 请求目标发送。hash 模式因此比较容易部署，但地址表现和一些服务器侧处理场景会受限制。

history 地址更自然，代价是你必须把服务器入口配置完整。Vue Router 还提供 memory 模式，适合非浏览器、SSR 或测试环境，不是把 hash 去掉的第三种线上捷径。

回退规则要有边界，不要把错误藏起来

服务器可以在找不到前端页面路径时返回应用入口，让 Vue Router 继续解析当前路径。

但 API 不存在，应该返回 API 错误；脚本或图片不存在，也不应该返回一份 HTML 假装成功。否则可能出现“脚本 MIME 类型不正确”，实际原因却是缺失文件被改成首页。

应用部署在子目录时，还要协调构建资源 base、路由 history 的 base 和服务器规则。三者不一致，会造成页面能打开、资源却找不到。

本文讲的是路由入口规则，不提供固定服务器配置套所有部署；Nginx、CDN、SSR 框架都需要按实际托管方式设置。Vue Router 的 API 不存在同一套 Python 对应实现。

前端的未找到页面，不等于服务器返回 404

服务器回退到入口后，一个不存在的路径也可能拿到 HTTP 200。前端 catch-all 可以显示“页面不存在”，但已经返回的响应状态不会因此自己变成 404。

如果网站依赖搜索引擎收录，需要避免大量不存在的路径返回成功页面。可以采用服务端路由、SSR、静态生成的真实页面，或在托管层识别有效路径。

验收时不要只从首页点击。至少分别测试直接访问、刷新、复制链接、不存在的页面、缺失静态文件和 API 错误。这样才能覆盖两种入口。

本题机制参考：Vue Router：Different History modes。

面试官继续追问

history 模式必须使用 SSR 吗？

不必须。静态 SPA 也可以使用，但需要服务器正确回退入口；SSR 是另一种页面生成和响应方式。

hash 后的内容会发给服务器吗？

不会作为 HTTP 请求目标发送，但前端脚本仍然可以读取它。不要把这误解为隐私保护。

配置前端 404 页面后，SEO 就没问题了吗？

还要看响应状态、内容和托管规则。前端显示未找到，并不自动改变服务器已经返回的 200。

面试速记卡

• hash：路由放在片段，HTTP 请求不带片段。
• history：路径正常，直接访问先由服务器处理。
• 回退规则：前端页面可回入口，API 与静态资源要分开。
• 前端 catch-all：显示未找到，不自动设置 HTTP 404。
• 验收：站内跳转、刷新、深链和不存在路径都要测。