概述
在Web前端单页面中，路由描述的是URL和UI的映射关系，通过监听URL的变化，然后匹配路由规则，显示相应的页面，并且无需刷新页面，但让这种映射方式是单项的，通过URL变化引起了UI的变化。
如何实现前端路由？
我们先来学习下前端路由实现的两种方式： Hash和History，这两种方式各有其优势和局限。
Hash模式(默认方式)
hash是URL中 （#）及后面的那部分，www.test.com/#/ 就是Hash URL,当# 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到URL的变化，从而跳转对应的页面，常用作瞄点在页面内进行导航，改变URL中的Hash部分不会引起页面刷新，并且无论哈希值如何变化，服务端接收到的URL请求永远是www.test.com。另外Hash模式的兼容性也更好。
javascript">foo://example.com:8042/over/there?name=ferret#nose\_/ \______________/\_________/ \_________/ \__/| | | | |
scheme authority path query fragmentHistory模式
History 模式是HTML5新推出的功能，主要通过 pushState和replaceState两个方法改变URL的path部分不会引起页面刷新，只会更新浏览器的历史记录。
javascript">//新增历史记录
history.pushState(stateObject,title,URL)
//替换当前历史记录
history.replaceState(stateObject,title,URL)另外History提供了类似hashchange 的popstate事件，但与之不同的是：我们需要通过点击浏览器的前进后退按钮时会触发popstate 事件，通过pushState/replaceState或<a> 标签改变URL不会触发popstate事件。但我们可以通过拦截pushState/replaceState的调用和<a> 标签的点击事件来监测URL变化，所以我们也可以通过这样的方式监听URL的变化，只是没有了hashchange事件那么便利，History的兼容性相比较于Hash又要差一些。
Hash和History对比
☀️ Hash只可以更改 # 后面的内容，History模式可以通过API设置任意的同源URL。
☀️History 模式可以通过API添加任意类型的数据到历史记录中，Hash模式只能更改哈希值，也就是字符串。
☀️Hash模式无需后端配置，并且兼容性好。History模式在用户手动输入地址或者刷新页面时会发起URL请求，后端需要配置 index.html 页面用于匹配不到静态资源的时候。
今天的分享就到这里啦，感谢大家的阅览,小江会一直与大家一起努力，文章中如有不足之处，你的支持是我前进的最大动力，请多多指教，感谢支持，持续更新中 ……
