Vue的路由实现：hash模式 和 history模式 abstract模式

abstract模式

适用于所有JavaScript环境，例如服务器端和Node.js. 如果没有浏览器API，路由器将自动强制进入此模式。

hash模式 和 history模式

众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。

hash模式特点

1.就是指 url 尾巴后的 # 号以及后面的字符, 请求的时候不会被包含在 http 请求中 只会携带#之前的，所以每次改变hash不会重新请求加载页面
2.hash 改变会触发 hashchange 事件
3.hash变化会被浏览器记录，浏览器的前进和后退都能用。
3.能兼容到ie8

history模式特点

1.页面请求时会带上整个链接，所以后台需要做相对处理，不然返回404

2.window.history.pushState(state, title, url)
// state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
// title：标题，基本没用，一般传 null
// url：设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, ‘./qq/’)，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, ‘/qq/’)，则变成 https://www.baidu.com/qq/
window.history.replaceState(state, title, url)
// 与 pushState 基本相同，但她是修改当前历史记录，而 pushState 是创建新的历史记录
window.addEventListener(“popstate”, function() {
// 监听浏览器前进后退事件，pushState 与 replaceState 方法不会触发

3.window.history.back(); // 后退
window.history.forward(); // 前进
window.history.go(-3); // 后退三个页面

4.history 只能兼容到 IE10；

history模式的问题
通过history api，我们丢掉了丑陋的#，但是它也有个问题：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。 在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。