原文見martin的博客

最近一直在研究前后端分離媒役，ajax可以很好的解決前后端分離的問題暴备，但是又存在著瀏覽器無法前進(jìn)后退，這個問題比較尷尬锨阿。但是采用前端路由的方式可以很好的解決這個問題宵睦。

前端路由與單頁頁面

路由就是指隨著瀏覽器地址欄的變化，展示給用戶的頁面也不相同墅诡。
傳統(tǒng)的網(wǎng)頁根據(jù)用戶訪問的不同的地址状飞，瀏覽器從服務(wù)器獲取對應(yīng)頁面的內(nèi)容展示給用戶。這樣造成服務(wù)器壓力比較大书斜，而且用戶訪問速度也比較慢诈闺。在這種場景下造寝，出現(xiàn)了單頁應(yīng)用钳垮。
單頁應(yīng)用蝗拿，就是只有一個頁面，用戶訪問一個網(wǎng)址样屠，服務(wù)器返回的頁面始終只有一個穿撮，不管用戶改變了瀏覽器地址欄的內(nèi)容或者在頁面內(nèi)發(fā)生了跳轉(zhuǎn)缺脉，服務(wù)器不會重新返回新的頁面，而是通過相應(yīng)的js操作來實現(xiàn)頁面的更改悦穿。而地址欄內(nèi)容的改變攻礼，顯示不同的頁面，實現(xiàn)的手段就是前端路由栗柒。

前端路由的實現(xiàn)方式

前端路由主要由兩種方式實現(xiàn)：

1. location.hash+hashchange事件
2. history.pushState()+popState事件

hash+hashchange實現(xiàn)

這種方法的好處在于支持IE瀏覽器礁扮。對早期的一些瀏覽器的支持比較好。
實現(xiàn)原理：
location.hash始終指向頁面url 中#之后的內(nèi)容
當(dāng)當(dāng)前頁面的url ='www.baidu.com',可以在瀏覽器的控制臺輸入location.hash為空瞬沦，當(dāng)頁面指向url ='www.baidu.com/#/hello'的時候太伊，location.hash = '#/hello'。通過讀取location.hash可以知道當(dāng)前頁面所處的位置逛钻。通過hashchange事件可以監(jiān)聽location.hash的變化僚焦，從而進(jìn)行相應(yīng)的處理即可。
那么如何觸發(fā)hash的改變呢曙痘？這里主要由兩種方法：

1. 設(shè)置a標(biāo)簽芳悲，href = '#/blue'，當(dāng)點擊標(biāo)簽的時候边坤，可以在當(dāng)前url的后面增加上'#/blue'名扛，同時觸發(fā)hashchange,再回調(diào)函數(shù)中進(jìn)行處理。
2. 直接在js中對location.hash = '#/blue'即可惩嘉，此時url會改變罢洲，也會觸發(fā)hashchange事件踢故。
   下面給出一個通用的hash前端路由的實現(xiàn)方案：

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的實例，進(jìn)行初始化殿较，然后進(jìn)行url與callback的綁定耸峭，就可以在hash發(fā)生改變的時候出發(fā)觸發(fā)相應(yīng)的callback。這種方式支持瀏覽器的前進(jìn)與后退淋纲。很好的解決了前后端分離之后的問題劳闹。這種方式有一個缺點就是#的存在，讓一些人看了覺得不是很舒服洽瞬，所以html給history新增了一些api本涕，從而以一種更優(yōu)雅的方式實現(xiàn)前端路由。

history.pushState()+popstate

跟之前的方法一樣,pushState()修改url的地址伙窃，popstate監(jiān)聽地址的改變菩颖，不同的是，手動的進(jìn)行pushState()并不會觸發(fā)popstate事件为障。
可以這樣理解：

1. 用戶點擊了某個鏈接晦闰，觸發(fā)ajax獲取新的頁面或者觸發(fā)js中的某些操作放祟，改變了dom結(jié)構(gòu)。
2. 我們希望保存上一個頁面呻右，這時候我們就使用pushState(data,null,url)來將上一個頁面的信息保存下來跪妥。
3. 當(dāng)用戶點擊瀏覽器的前進(jìn)或者后退的時候，觸發(fā)popstate事件声滥，可以讀取到數(shù)據(jù)眉撵，然后進(jìn)行該頁面的操作或者ajax獲取該頁面的數(shù)據(jù)，也可以通過pushState()中的data來進(jìn)行還原醒串、更新执桌。

自己寫了一個demo,便于理解。其中url的鏈接均采用了#/打頭芜赌，主要是如果是相對路徑仰挣，服務(wù)器端會直接跳轉(zhuǎn)到對應(yīng)的網(wǎng)頁，如果想要實現(xiàn)不用#,?等缠沈，需要在服務(wù)器端進(jìn)行處理膘壶，不論用戶訪問的相對url是什么，都會返回最初的那個頁面洲愤。
1.24更新：此處url直接采用相對路徑颓芭，可以實現(xiàn)前進(jìn)后退，問題出在刷新上柬赐，當(dāng)用戶刷新亡问，此時，如果服務(wù)器端不做處理肛宋，會顯示沒有頁面州藕，服務(wù)器端只需要輸出原本的那個頁面就可以完美解決問題。

;(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,'');//最開始的狀態(tài)酝陈，采用replace直接替換
    a1.addEventListener('click',function(){
    count1++;
        history.pushState({count1:count1,count2:count2},null,'#/s'+count1);//之后的狀態(tài)床玻，需要進(jìn)行保存
        a1.innerHTML = 's'+count1;
    })
    a2.addEventListener('click',function(){
    count2++;
        history.pushState({count1:count1,count2:count2},null,'#/k'+count2);//之后的狀態(tài)，需要進(jìn)行保存
        a2.innerHTML = 'k'+count2;
    })
    window.addEventListener('popstate',function(e){
    console.log(e.state);
    a1.innerHTML = 's'+e.state.count1;//監(jiān)聽popstate事件沉帮，對狀態(tài)進(jìn)行還原
      a2.innerHTML = 'k'+e.state.count2;
    })
})()

采用了立即執(zhí)行函數(shù)來避免污染全局變量锈死，其中點擊一下a1,a2元素，均會進(jìn)行pushState操作穆壕，在進(jìn)行前進(jìn)后退的時候待牵，就會觸發(fā)popstate事件，通過在該事件中對元素進(jìn)行還原喇勋，優(yōu)雅的解決了單頁應(yīng)用前進(jìn)后退問題缨该。
完整的代碼見:code
演示頁面見：demo

總結(jié)

當(dāng)用戶的操作修改了dom結(jié)構(gòu)，而我們希望用戶可以通過瀏覽器的前進(jìn)后進(jìn)行返回上一步的操作茄蚯，就需要用到前端路由压彭。
hash可以很好的進(jìn)行保存睦优，同時還能夠自動對當(dāng)前頁面的dom結(jié)構(gòu)進(jìn)行保存。支持IE壮不，就是頁面的url必須#開頭汗盘。代碼相對復(fù)雜一點。
而history也是一種方法询一，思路簡單隐孽，更符合前端路由的目的，代碼簡單健蕊，url可以隨意指定菱阵，如果是純相對路徑需要在服務(wù)器端進(jìn)行處理。