如今前端框架層出不窮，大大的方便了我們平常工作中的開發，提高了開發的效率，然而，在使用框架的過程中還是很有必要了解其中一些自己感興趣的功能的原生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則可以優化這一現象。