p>不少刚学Vue Router的同学都会疑惑,history模式和hash模式到底有啥区别?选哪个才适合自己的项目?今天咱们就从原理、URL、部署、场景这些角度,把这俩模式掰碎了讲清楚~
两种模式的底层原理有啥不同?
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对分享、爬虫抓取更友好);
- 团队有能力处理服务器配置,愿意为体验多花点部署成本。
举个真实例子:之前做内部订单管理系统,用hash模式部署到公司旧服务器,不用找运维改配置,开发和部署都很快;后来做品牌官网,为了URL好看、分享出去有面儿,咬牙选了history模式,提前和运维沟通好服务器配置,上线后用户反馈链接「终于不像技术 Demo 了」~
总结下哈:hash和history模式的核心区别,从原理到表现再到部署,每一步都影响着开发和用户体验,如果想「省心部署+兼容老环境」,hash模式是稳妥选择;如果追求「URL美观+专业体验」,history模式值得折腾~ 下次选路由模式时,先想清楚项目定位和部署条件,就不会纠结啦~
版权声明
本文仅代表作者观点,不代表Code前端网立场。
本文系作者Code前端网发表,如需转载,请注明页面地址。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。