如今前端框架屡见不鲜，大大的便利了我们泛泛事情中的开发，提高了开发的效率，然而，在使用框架的过程中还是很有须要了解此中一些本身感兴趣的成果的原生js实现方法。
我一直对如今一些框架的路由感兴趣，今天就来讲讲我在前端路由的学习心得。
何为路由？我的理解是在不刷新页面的情况下，通过变动页面的url来执行差此外措施操纵，常见的前端路由实现方法有：
1，通过hash实现（在url后面插手#+路由名），使用hash实现路由的方法还是很常见的，一些对照火的前端框架中的路由都是通过hash实现，例如：AngularJS。hash实现路由的好处就是兼容性对照好，兼容IE8，欠好的处所就是不太美不雅观的 "#"。
2，通过HTML5中historyAPI实现，historyAPI是HTML5中，在老版本的history中优化了一些新的要领和属性，通过“/***”的方法添加路由，错误谬误就是兼容性问题了，终究是HTML5中新加的对象，跟着浏览器的不停成长，相信各大浏览器厂商城市实现对该API的实现。
下面正式开始看看H5中的historyAPI：
属性：
length：当前窗口的历史记录条数。
scrollRestoration：允许Web应用措施在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。
state：返回一个暗示历史仓库顶部的状态的值。这是一种可以不必期待popstate 事件而检察状态而的方法。
要领：
back()：回到上一条历史记录，如果当前位置已经是开始的历史记录，则无效果，也不会报错。
forward()：前往下一条历史记录，如果当前位置已经是最后一条历史记录，则无效果，也不会报错。
go(num)：前进或回退指定num条历史记录，当num为负数的时候，暗示回退num条历史记录，当num为大于0的数时，暗示前进num条历史记录。
pushstate(state,title,url)：向历史记录中添加一笔记录。
state：存储json格局的数据，存储的时间可以不才面的popstate事件中获取到，也可以用state属性获取到。
title：添加或改削的历史记录的标题，但是此刻所有的浏览器城市忽略这个参数。
url：添加或改削的历史记录的地点，用于更新浏览器的地点栏，并不在乎URL是否已经存在地点列表中。更重要的是，它不会从头加载页面。
replaceState(state,title,url)：替换当前历史记录的值，参数与pushstate要领一致。
事件：
popstate：当切换历史记录的时候触发，即使用go()，forward()，back()要领或使用浏览器的前进撤退退却按钮时会触发，而pushstate()与replacestate()要领例不会触发该事件。
使用场景：
在使用ajax请求数据，然后绘制到页面时，使用页面成果时，，浏览器的前进撤退退却按钮是没有用的，这样用户体验很欠好，而且也倒霉于SEO，使用historyAPI则可以优化这一现象。