vue-router 实现原理，几种模式，有何区别

vue-router路由对象中，路由有两种模式： hash 和 history
hash
hash 背后的原理是 onhashchange
onhashchange 事件在当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发
localtion是js里管理地址栏的内置对象，可通过window.localtion访问
hash发生变化的url都会被浏览器记录下来，使得浏览器的前进后退都可以使用了
window.onhashchange=function(){
let hash=location.hash.slice(1);
document.body.style.color=hash;
}
history
history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法
通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原
popstate 实现history路由拦截，监听页面返回事件
当活动历史记录条目更改时，将触发popstate事件
这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。
当刷新时，如果服务器中没有相应的相应或者资源，访问时会返回404，所以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();

两者区别

hash只能改变#后面的url片段，而history 可以设置与当前url**同源的任意url
hash必须设置与当前url不同的url的，才会触发动作将记录添加到栈中，history设置的新url可与当前url一致，这样也会把记录添加到栈中
hash模式下，仅hash符号之前的url会被包含在请求中,后端即使没有做到对路由的全覆盖，也不会返回404错误；而history 模式下前端的url必须和实际向后端发起请求的url一致
参考资源
https://www.jianshu.com/p/81ccd1124f48