vue路由mode模式：history和hash的区别

引言：
对于vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是vue-router存在的意义。前端路由的核心，就在于——改变视图的同时不会向后端发送请求。

为了达到这一目的，浏览器当前提供了一下两种支持：
1.hash（默认）——即地址栏URL中的#符号（此hash不是密码学里的散列运算）。
比如这个URL:http://www.abc.com/#/hello,hash的值为#/hello。它的特点在于：hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2.history——利用了HTML5 History Interface中新增的pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两种方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础之上，他们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的URL,但浏览器不会立即向后端发送请求。
因此可以说，hash模式和history模式都属于浏览器自身的特性，vue-router只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

使用场景
一般场景下，hash和history都可以，除非你更在意颜值，#符号夹杂在URL里看起来确实有些不太美丽。如果不想要很丑的hash，我们可以用路由的history模式，这种模式充分利用history.pushStatu API来完成
URL跳转而无须重新加载页面——vue-router官网。
另外，根据Mozilla Develop Network的介绍，调用history.pushState()相比于直接修改hash，存在以下优势：
1.pushState()设置的新URL可以是与当前URL同源的任意URL;而hash只可修改#后面的部分，因此只能设置与当前URL同文档的URL;
2.pushState()设置的新URL可以与当前URL一模一样，这样也会把记录添加到栈中；而hash设置的新值必须与原来不一样才会触发动作将记录添加到栈中；
3.pushState()可额外设置title属性供后续使用。

问题：
当然啦，history也不是样样都好。SPA虽然在浏览器里游刃有余，但真要通过URL向后端发起HTTP请求时，两者的差异就来了。尤其在用户手动输入URL后回车，或者刷新（重启）浏览器的时候。
hash模式下，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com,因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误。
history模式下，前端的url必须和实际向后端发送请求的url一致，如http://www.abc.com/book/id。如果后端缺少对/book/id的路由处理，将返回404错误。Vue-router官网里如此描述：“不过这种模式要玩好，还需要后台配置支持。。。所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果url匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面”。
history模式怕啥
通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
不怕前进，不怕后退，就怕刷新——f5，（如果后端没有准备的话），因为刷新是实实在在地去请求服务器的，不玩虚的。
在hash模式下，前端路由修改的是#中的信息，而浏览器请求时不带他玩的，所以没有问题，但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。
如何正确使用history模式

警告：
给个警告，因为这么做以后你的服务器就不再返回404错误页面，因为对于所有路径都会返回index.html文件。为了避免这种情况，你应该在vue应用里面覆盖所有的路由情况，然后再给出一个404页面

routes: [
 { path: '*', component: NotFoundComponent }
 ]