vue router 的 history 模式与 hash 模式本质均为实现 spa 无刷新导航，但 history 模式基于 html5 history api、url 干净无#、需后端 fallback 配置且更利于 seo；hash 模式依赖 hashchange 事件、url 含#、开箱即用、兼容性好但不利于 seo 和第三方分享。
Vue Router 的 history 模式和 hash 模式，本质都是为单页应用（SPA）实现无刷新跳转，但实现路径、URL 表现和部署要求完全不同。选错模式容易导致刷新 404、分享失败或 SEO 劣化，所以得看清楚再定。
URL 样式和用户感知
hash 模式 URL 带 #，比如 https://site.com/#/user/123；history 模式是干净的路径，如 https://site.com/user/123。后者更符合传统网站习惯，适合对外宣传、嵌入第三方平台（比如微信、钉钉内嵌页），因为有些 App 会拦截或不识别带 # 的链接。
底层原理差异
hash 模式依赖浏览器原生的 hashchange 事件，只监听 # 后面的变化，不发请求、不刷新页面，兼容 IE8+。
history 模式基于 HTML5 的 pushState 和 replaceState，能修改整个路径，还能存 state 数据、设 title，但需要 IE10+ 支持。
- hash 变化不会触发服务器请求，天然“免配置”
- history 导航不发请求，但直接访问
/user/123时，浏览器会向服务器要这个路径 —— 如果后端没配好，就返回 404
部署与后端配合要求
hash 模式开箱即用，静态托管（比如 GitHub Pages、Nginx 纯前端部署）完全不用改配置。
history 模式必须让后端把所有非资源请求（如 .js、.css 以外的路径）全部 fallback 到 index.html，常见做法：
- Nginx：加
try_files $uri $uri/ /index.html; - Apache：启用
mod_rewrite，配置重写规则 - Vercel/Netlify：在构建设置里开启 SPA 模式或加 _redirects 文件
SEO 和可访问性表现
两者都需配合服务端渲染（SSR）或预渲染才能真正友好。但纯前端场景下：
- hash 内容通常被搜索引擎忽略，不利于收录
- history 路径是标准 URL，爬虫能正常识别结构，更利于基础 SEO
- 用户复制链接、书签、微信转发，history 模式链接更稳定可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
