前端路由之hashRouter与BrowserHistory

前端路由：指不同的url展示不同的页面，在单页面应用中不刷新页面也能实现想要达到的效果

hash路由模式http://localhost/hash.html#/home
原理:
在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
优点:
1.只需要前端配置路由表, 不需要后端的参与
2.兼容性好, 浏览器都能支持
3.hash值改变不会向后端发送请求, 完全属于前端路由
缺点:
hash值前面需要加#, 不符合url规范,也不美观

history路由模式http://localhost/hash.html/home
history运用了浏览器的历史记录栈，有back,forward,go方法，在HTML5中新增了pushState（）和replaceState（）方法，它们提供了对历史记录进行修改的功能，不过在进行修改时，虽然改变了当前的URL，但是浏览器不会马上向后端发送请求。
优点:
1.符合url地址规范, 不需要#, 使用起来比较美观
缺点:
1.在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
2.兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.