参考:
【前端路由】Vue-router 中hash模式和history模式的区别
浅谈vue-router原理
从vue-router看前端路由的两种实现
vue-router工作原理概述和问题分析
vue-router主要通过hash模式和history模式来实现前端路由,更新视图而不重新请求页面。
- hash:即地址栏URL中的#符号
- history-利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。pushState()不会触发页面刷新,只是导致history对象发生变化,地址栏会有反应
我们在开发的时候默认使用hash模式(其url后永远带着#号),那
1、为什么要使用history模式?
- history模式没有#号,看起来更规范更正常,适合推广宣传
- 开发app的适合会有分享页面,将这个页面分享到第三方的app里时,有的app不允许url带有#符号
但是,
2、history模式也存在一个问题
在访问二级页面的时候,做刷新操作,会出现404错误,此时需要后端人员配置一下代理服务器(apache或者nginx)的url重定向,重定向到你的首页路由上。history模式下,前端的url必须和后端发起请求的url一致,如http://www.baidu.com/a/ ,如果后端缺少对/a的处理,将返回404错误。
(.1) history模式下配置Apache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
(2) history模式下配置nginx
location / {
try_files $uri $uri/ /index.html;
}
3、hash模式不会返回404错误,为什么?
hash模式下,仅hash符号之前的内容会被包含在请求中,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。即hash虽然出现在URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
总结:
传统的路由:当用户访问一个url时,对应的服务器会接收这个请求,然后解析url中的路径,从而执行对应的处理逻辑。这样就完成了一次路由分发
前端路由:不涉及服务器,是前端利用hash或者HTML5的history API来实现的,一般用于不同内容的展示和切换。