原文見martin的博客
最近一直在研究前后端分離，ajax可以很好的解決前后端分離的問題，但是又存在著瀏覽器無法前進后退，這個問題比較尷尬。但是采用前端路由的方式可以很好的解決這個問題。
前端路由與單頁頁面
路由就是指隨著瀏覽器地址欄的變化，展示給用戶的頁面也不相同。
傳統的網頁根據用戶訪問的不同的地址，瀏覽器從服務器獲取對應頁面的內容展示給用戶。這樣造成服務器壓力比較大，而且用戶訪問速度也比較慢。在這種場景下，出現了單頁應用。
單頁應用，就是只有一個頁面，用戶訪問一個網址，服務器返回的頁面始終只有一個，不管用戶改變了瀏覽器地址欄的內容或者在頁面內發生了跳轉，服務器不會重新返回新的頁面，而是通過相應的js操作來實現頁面的更改。而地址欄內容的改變，顯示不同的頁面，實現的手段就是前端路由。
前端路由的實現方式
前端路由主要由兩種方式實現：
- location.hash+hashchange事件
- history.pushState()+popState事件
hash+hashchange實現
這種方法的好處在于支持IE瀏覽器。對早期的一些瀏覽器的支持比較好。
實現原理：
location.hash始終指向頁面url 中#之后的內容
當當前頁面的url ='www.baidu.com',可以在瀏覽器的控制臺輸入location.hash為空，當頁面指向url ='www.baidu.com/#/hello'的時候，location.hash = '#/hello'。通過讀取location.hash可以知道當前頁面所處的位置。通過hashchange事件可以監聽location.hash的變化，從而進行相應的處理即可。
那么如何觸發hash的改變呢？這里主要由兩種方法：
- 設置a標簽，href = '#/blue'，當點擊標簽的時候，可以在當前url的后面增加上'#/blue'，同時觸發hashchange,再回調函數中進行處理。
- 直接在js中對location.hash = '#/blue'即可，此時url會改變，也會觸發hashchange事件。
下面給出一個通用的hash前端路由的實現方案：
function Router(){
this.currentUrl='';
this.routes={};
}
Router.prototype.route = function(path,callback){
this.routes[path] = callback || function(){}
}
Router.prototype.refresh = function(){
this.currentUrl = location.hash.slice(1) || '/';
this.routes[this.currentUrl]();
}
Router.prototype.init = function(){
window.addEventListener('load',this.refresh.bind(this),false);
window.addEventListener('hashchange',this.refresh.bind(this),false);
// console.log(location.hash)
// if(location.hash.slice(1)!=='/')
// location.hash = '#/';
}
上述定義了一個Router對象，在實例中可以這么使用：
var route = new Router();
route.init();
function changecolor(color){
var body = document.getElementsByTagName('body')[0];
body.style['background-color'] = color;
}
route.route('/',changecolor.bind(null,'skyblue'));
route.route('/blue',changecolor.bind(null,'blue'));
route.route('/green',changecolor.bind(null,'green'));
route.route('/color',function(){
var p= document.getElementsByTagName('a');
[].forEach.call(p,function(item){item.style['color'] = '#'+((~~(Math.random()*(1<<24))).toString(16));})
});
新建一個Router的實例，進行初始化，然后進行url與callback的綁定，就可以在hash發生改變的時候出發觸發相應的callback。這種方式支持瀏覽器的前進與后退。很好的解決了前后端分離之后的問題。這種方式有一個缺點就是#的存在，讓一些人看了覺得不是很舒服，所以html給history新增了一些api，從而以一種更優雅的方式實現前端路由。
history.pushState()+popstate
跟之前的方法一樣,pushState()修改url的地址，popstate監聽地址的改變，不同的是，手動的進行pushState()并不會觸發popstate事件。
可以這樣理解：
- 用戶點擊了某個鏈接，觸發ajax獲取新的頁面或者觸發js中的某些操作，改變了dom結構。
- 我們希望保存上一個頁面，這時候我們就使用pushState(data,null,url)來將上一個頁面的信息保存下來。
- 當用戶點擊瀏覽器的前進或者后退的時候，觸發popstate事件，可以讀取到數據，然后進行該頁面的操作或者ajax獲取該頁面的數據，也可以通過pushState()中的data來進行還原、更新。
自己寫了一個demo,便于理解。其中url的鏈接均采用了#/打頭，主要是如果是相對路徑，服務器端會直接跳轉到對應的網頁，如果想要實現不用#,?等，需要在服務器端進行處理，不論用戶訪問的相對url是什么，都會返回最初的那個頁面。
1.24更新：此處url直接采用相對路徑，可以實現前進后退，問題出在刷新上，當用戶刷新，此時，如果服務器端不做處理，會顯示沒有頁面，服務器端只需要輸出原本的那個頁面就可以完美解決問題。
;(function(){
var div1 = document.getElementById('div1');
var a1 = document.getElementById('a1');
var a2 = document.getElementById('a2');
var count1 = 0;
var count2 = 0;
history.replaceState({count1:count1,count2:count2},null,'');//最開始的狀態，采用replace直接替換
a1.addEventListener('click',function(){
count1++;
history.pushState({count1:count1,count2:count2},null,'#/s'+count1);//之后的狀態，需要進行保存
a1.innerHTML = 's'+count1;
})
a2.addEventListener('click',function(){
count2++;
history.pushState({count1:count1,count2:count2},null,'#/k'+count2);//之后的狀態，需要進行保存
a2.innerHTML = 'k'+count2;
})
window.addEventListener('popstate',function(e){
console.log(e.state);
a1.innerHTML = 's'+e.state.count1;//監聽popstate事件，對狀態進行還原
a2.innerHTML = 'k'+e.state.count2;
})
})()
采用了立即執行函數來避免污染全局變量，其中點擊一下a1,a2元素，均會進行pushState操作，在進行前進后退的時候，就會觸發popstate事件，通過在該事件中對元素進行還原，優雅的解決了單頁應用前進后退問題。
完整的代碼見:code
演示頁面見：demo
總結
當用戶的操作修改了dom結構，而我們希望用戶可以通過瀏覽器的前進后進行返回上一步的操作，就需要用到前端路由。
hash可以很好的進行保存，同時還能夠自動對當前頁面的dom結構進行保存。支持IE，就是頁面的url必須#開頭。代碼相對復雜一點。
而history也是一種方法，思路簡單，更符合前端路由的目的，代碼簡單，url可以隨意指定，如果是純相對路徑需要在服務器端進行處理。
