什么是前端路由？
前端路由，就是一个前端不同页面的状态管理器，可以不向后台发送请求而直接通过前端技术实现多个页面的效果。
单页路由跳转模式有两种：
-
哈希模式（利用
hashchange事件监听 url的hash 的改变） -
history模式（使用此模式需要后台配合把接口都打到我们打包后的index.html上）
1.哈希模式的原理：hashChange
window.addEventListener('hashchange', function(e) {
console.log(e)
})
window.addEventListener('hashchange')
hash原理：
HTML页面中通过锚点定位原理可进行无刷新跳转，触发后url地址中会多出 # + 'XXX'的部分，同时在全局的window对象上触发hashChange事件，这样在页面锚点哈希改变为某个预设值的时候，
通过代码触发对应页面DOM改变，就可以实现基本的路由了。
由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件，浏览器的进后退也能对其进行控制，所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。
2.history模式：
history 利用了HTML5 History Interface中新增的pushState()和replaceState()方法，用来完成URL跳转而无需重新加载页面，不过这种模式需要后台配置支持。 因为我是的英语是单页面客户端应用，如果没有后台正确的配置，就需要配置404页面。
history常用API：前进后退
- history.forward(); //在历史记录中前进一步
- history.back(); //在历史记录中后退一步
- history.go(n): //在历史记录中跳转n步骤，n=0为刷新本页,n=-1为后退一页。
history修改历史状态：
pushState replaceState：
两个方法,这两个方法接收三个参数: stateObj, title, url
- history.pushState(data[,title][,url]);//向历史记录中追加一条记录
- history.replaceState(data[,title][,url]);//替换当前页在历史记录中的信息。
- history.state;//是一个属性，可以得到当前页的state信息。
- window.onpopstate;//是一个事件，在点击浏览器后退按钮或js调用forward()、back()、go()时触发。监听函数中可传入一个event对象，event.state即为通过pushState()或replaceState()方法传入的data参数。
通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，
history存在的问题：
通过history api，我们丢掉了丑陋的#，但是它也有个问题：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。 在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题. 但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。
参考：https://www.jianshu.com/p/bfffb4b8c9fa
参考：https://www.cnblogs.com/dashnowords/p/9671213.html
参考：https://www.cnblogs.com/GGbondLearn/p/12239651.html