咱们今天说说VUE路由的hash模式与history模式的区别，这个也是面试常问的问题，不要小看这道题其实问到这里的时候那个面试官应该是个大牛，开发经验丰富，这个题其实就是考验你的开发经验是否属实。
【前端路由】Vue-router 中hash模式和history模式的区别
有凯泽
咱们来看看小白的回答。
小白回答：hash模式url带#号，history模式不带#号。
回答总结：这个回答其实和没有回答是一样，百度一下都知道了，官网文档也有，如果这样回答就能通过，那么那个面试官问这个问题又有什么意义呢？其实这个问题的意义是考验你的开发经验，与实际场景的应用和与后端人员的配合。
大牛解答：hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。那么什么时候要用history模式呢？如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。当然其功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式，但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。
以上摘自：VUE路由的hash模式与history模式的区别？
官方介绍：HTML5 History 模式
关于Vue的路由一直以来个人都觉得是一件很神奇的事情，一个单页面应用居然可以做到多路由跳转并按需加载页面代码。以往的做法都是通过锚点来定位对应的页面代码，而这种古老的操作方式最大的问题就是首屏加载缓慢，一次性加载了所有页面代码。
那么Vue-router又是怎么实现的呢？
首先，这个router有两种模式：hash模式（默认）、history模式（需配置mode: 'history'）
| hash | history | |
| url显示 | 有#，很Low | 无#，好看 |
| 回车刷新 | 可以加载到hash值对应页面 | 一般就是404掉了 |
| 支持版本 | 支持低版本浏览器和IE浏览器 | HTML5新推出的API |
然后，我们来研究下两者的原理：
hash模式
我们先来认识下这位朋友#，这个#就是hash符号，中文名哈希符或锚点，当然这在我们前端领域姑且这么称呼。
然后哈希符后面的值，我们称之为哈希值。OK，接下来我们继续分析他的原理。路由的哈希模式其实是利用了window可以监听onhashchange事件，也就是说你的url中的哈希值（#后面的值）如果有变化，前端是可以做到监听并做一些响应（搞点事情），这么一来，即使前端并没有发起http请求他也能够找到对应页面的代码块进行按需加载。
后来人们给他起了一个霸气的名字叫前端路由，成为了单页应用标配。
大伙可以围观下网易云音乐的url模式：https://music.163.com/#/friend
history模式
我们先介绍一下H5新推出的两个神器：pushState与replaceState
具体自行百度，简而言之，这两个神器的作用就是可以将url替换并且不刷新页面，好比挂羊头卖狗肉，http并没有去请求服务器该路径下的资源，一旦刷新就会暴露这个实际不存在的“羊头”，显示404。
那么如何去解决history模式下刷新报404的弊端呢，这就需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html），前后端联手，齐心协力做好“挂羊头卖狗肉”的完美特效。
至此，我们的前端路由在实现与展示效果上又更进了一步！
总之，pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。
总结
传统的路由指的是：当用户访问一个url时，对应的服务器会接收这个请求，然后解析url中的路径，从而执行对应的处理逻辑。这样就完成了一次路由分发。
而前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，一般用于不同内容的展示和切换。
----------------------------- 2018.10.19 补充 -----------------------------
history模式下，build之后本地 index.html 打开是无效的。
hash模式下，build之后本地 index.html 打开正常！
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count">22</span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;" data-report-click="{"mod":"1582594662_002"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/fifteen718"> <img src="https://profile.csdnimg.cn/1/E/0/3_fifteen718" class="avatar_pic" username="fifteen718"> <img src="https://g.csdnimg.cn/static/user-reg-year/2x/5.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/fifteen718" data-report-click="{"mod":"popu_379"}" target="_blank">黑子Kuroko</a></span> <span class="flag expert"> <a href="https://blog.csdn.net/home/help.html#classicfication" target="_blank"> <svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-blogexpert"></use> </svg> 博客专家 </a> </span> </div> <div class="text"><span>发布了175 篇原创文章</span> · <span>获赞 367</span> · <span>访问量 80万+</span></div> </div> <div class="right-message"> <a href="https://bbs.csdn.net/topics/395527642" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-messageboard">他的留言板 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div> </article>
类似资料：