vue-router 的 hash 和 history 模式

为什么vue中有这两种模式

为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这种目的，浏览器当前提供了以下两种支持：

hash——即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

404错误

hash模式下，仅hash符号之前的内容会被包含在请求中，如http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
history模式下，前端的url必须和后端发起请求的url一致，例如http://www.abc.com/boo/id，如果后端缺少对book/id的路由处理，就会返回404错误。

hash

hash模式的背后是onhashchange事件，可以在window对象上监听这个事件：

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL);
  let hash = location.hash.slice(1);
  document.body.style.color = hash;
}

这段可以在hash改变的时候改变字体颜色。
hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以使用了，同时点击后退时，页面字体颜色也会发生变化。
这样一来虽然没有向后端发送请求，但是页面状态和url关联在了一起，这就是前端路由。网易云和百度网盘就是典型的使用hash的网页。

history

history包括go(),forward(),back()方法。

history.go(-2);
history.go(2);//前进两次
history.back();
history.forward();

修改历史状态，包括了pushState()和replaceState()两种方法，这两个方法接收三个参数，stateObj,title,url。

history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
  console.log(event.state)
  if(event.state && event.state.color === 'red'){
    document.body.style.color = 'red';
  }
}
history.back();
history.forward();

通过pushState方法把页面状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，主要是滚动条的位置，阅读进度，组建的开关等等。

history模式不怕前进不怕后退怕刷新，f5。
刷新是实实在在的去请求后端了。
在hash模式下，前端路由修改的是#中的信息，而浏览器请求是不带他的，所以没有问题。但是在history模式下你可以自由的修改path，当刷新时如果没有相应的的响应或者资源，会分分钟刷新一个404出来。