如今前端框架层出不穷，大大的方便了我们平常工作中的开发，提高了开发的效率，然而，在使用框架的过程中还是很有必要了解其中一些自己感兴趣的功能的原生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则可以优化这一现象。