Vue-Router的hash 和 history 模式

在vue的路由配置中有mode选项，最直观的区别就是：

• hash 模式下在url中带了一 # 。
• 而 history 模式是没有#的。

vue默认使用 hash模式。

mode:"hash";  
mode:"history";

hash模式

地址栏 URL 中的 # 符号， 比如这个 URL：http://www.abc.com/#/aaaa hash 的值为 #/aaaa 。
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器也不会立即向后端发送请求。

history模式的问题模式

通过history api，我们丢掉了#，但是它也有个问题：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。
在 hash 模式下，前端路由修改的是#中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，所以没有问题。但是在 history 下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。