p>不少刚学Vue Router的同学都会疑惑，history模式和hash模式到底有啥区别？选哪个才适合自己的项目？今天咱们就从原理、URL、部署、场景这些角度，把这俩模式掰碎了讲清楚～

terry 3小时前阅读数 4 #Vue

两种模式的底层原理有啥不同？

hash模式的核心是浏览器里的「哈希值」（就是URL里后面那串），举个例子，你访问 http://xxx.com/#/user ，这里的 #/user 就是哈希，浏览器有个特性：哈希值变化时，页面不会重新加载，但会触发 hashchange 事件，Vue Router 就是监听这个事件，一旦哈希变了，就去匹配对应的路由组件，完成页面切换。

而 history 模式呢，它依赖的是 HTML5 新增的 History API ，这个API里有 pushState 和 replaceState 两个方法，能在不刷新页面的情况下修改浏览器地址栏的URL，同时还能操作浏览器的历史记录，当URL变化时，浏览器会触发 popstate 事件（不过要注意，pushState/replaceState 本身不会触发这个事件，Vue Router 内部做了额外处理来监听变化），简单说，history模式是靠更「现代」的浏览器API，实现了无刷新改URL还能同步路由的效果～

URL 显示效果差异在哪？

打开项目跑起来,一眼就能看出区别：

hash模式的URL长这样：http://你的域名/#/首页 ，中间多了个，哪怕路由层级深一点，也会一直跟着，http://xxx.com/#/user/123 。
history模式的URL就清爽多了：http://你的域名/首页 ，和咱们平时逛的普通网站URL一样，层级再深也是 http://xxx.com/user/123 这种格式。

对于用户来说, 多少有点「技术感」，甚至会觉得链接不正规；history模式的URL更像「正经网站」，分享出去也更体面～

项目部署时要注意什么？

这一步最容易踩坑,得仔细看～
hash模式的部署堪称「懒人友好」：因为服务器只认前面的路径（http://xxx.com/#/xxx ，服务器实际处理的是 http://xxx.com/ ），所以不管你路由怎么配，服务器只要能返回根目录的 index.html 就行，不需要额外配置，哪怕你把项目丢到静态托管平台（比如GitHub Pages），直接部署也能跑通。

但 history模式就没这么随便了，因为它的URL是「真实路径」（http://xxx.com/user ），当用户直接在地址栏输入这个链接，或者刷新页面时，服务器会去解析这个路径 ，如果服务器里没有对应的资源（毕竟单页应用只有一个 index.html ），就会返回404错误，所以部署history模式的项目，必须让服务器把「所有路由请求」都定向到 index.html 。

举个nginx配置的例子（其他服务器类似逻辑）：

location / {
  try_files $uri $uri/ /index.html; 
}

这段配置的意思是：服务器先找有没有匹配的静态文件（$uri ），没有的话找对应的目录（$uri/ ），还没有就跳转到 index.html ，让前端路由来处理页面渲染，要是没做这个配置，用户刷新子路由页面就会白屏，这坑踩过一次就忘不了…

实际开发选哪种更合适？

没有绝对的好坏,得看项目需求：

选 hash模式 的情况：
- 项目是内部管理系统、工具类页面，对URL美观度要求不高；
- 部署环境受限（比如公司老服务器配置麻烦，或者用GitHub Pages这类平台），不想折腾服务器配置；
- 兼容老浏览器（虽然现在IE基本淘汰，但history模式依赖HTML5 API，老旧浏览器可能不支持）。
选 history模式 的情况：
- 做面向C端的产品官网、营销页，想要URL看起来更专业，提升用户信任感；
- 项目需要「伪静态URL」（类似传统多页网站的URL结构），方便SEO优化（虽然SPA本身SEO弱，但干净的URL对分享、爬虫抓取更友好）；
- 团队有能力处理服务器配置,愿意为体验多花点部署成本。