vue中的hash与history

面试必问的经典问题，有时候不准备准备，就只记得hash多一个# 丑不拉几，而history相反，其余细节都忘记了。
日常使用已有框架或者公司内部构建好的框架，往往只需要直接继续往下画页面，写功能就可以了，久而久之，就越来越模糊了。
这次的项目，原本不想要#在路由中，使用了history，开发的时候一切正常，刷新、前进、后退，都没有毛病，部署发布后就马上出现问题了，刷新直接404，页面找不到了！

两种解决方案：

1. 继续使用history拒绝使用丑丑的#
2. 使用hash模式

使用方案1：找后端配合配置apache或者是nginx的url进行重定向，重定向回主页面，但是刷新情况下，自然是继续保持在原来页面更加符合使用场景，特别是进入带有特殊标识的子页面，比如：带有id的详情页，刷新就回去菜单了，体验感差
使用方案2：丑但是不会有404问题

hash特点在于：#出现在url中，但是不会被包括在http请求中，对后端完全没有影响，不会重新加载页面。
history特点在于利用了HTML5 History Interface中新增的pushState()和replaceState（）方法，在使用back,forward,go的基础上，提供了对历史记录进行修改的功能，但是执行修改时，虽然改变了当前url，但是浏览器不会向后端发送请求。

history修改历史状态
包括了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对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。

hash模式和histoury模式都是属于浏览器自身的特性，Vue-Router只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。