摘要：部分比較重要部分比較重要重點是下面的，這里操作我們借助實現的邏輯不難，但是利用總是沒有所謂前端路由的那種味，必然也不是主流方法。而現在的前端路由也是基于這個原理實現的。和異曲同工，而且前者可以在該事件之外任何地方隨時使用。

通常 SPA 中前端路由有2中實現方式，本文會簡單快速總結這兩種方法及其實現：

修改 url 中 Hash

利用 H5 中的 history

我們都知道 url 中可以帶有一個 hash， 比如下面 url 中的 page2

https://www.abc.com/index.html#page2

window 對象中有一個事件是 onhashchange，以下幾種情況都會觸發這個事件：

直接更改瀏覽器地址，在最后面增加或改變#hash；

通過改變location.href或location.hash的值；

通過觸發點擊帶錨點的鏈接；

4）瀏覽器前進后退可能導致hash的變化，前提是兩個網頁地址中的hash值不同。

這個事件有 2 個重要的屬性：oldURL 和 newURL，分別表示點擊前后的 url

click me

這樣我們可以這樣建立一個 DOM

  
  

    

      
This is index page
    
    

      
This is info page
    
    

      
This is detail page
    
    

      
This is show page
    
    

      
This is contact page
    
  

為了好看我們加上 css， 比較重要的樣式已經在代碼里標出來了。

body{
  padding:0;
  margin: 0;
}
h1{
  margin: 0 0 0 160px;
}
nav{
  width: 150px;
  height: 150px;
  float: left;
}
nav a{
  display: block;
  background: #888;
  border: 1px solid #fff;
  border-top: none;
  width: 150px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  color: #333;
  text-decoration: none;
}
.container{
  height: 154px;
}
/* page 部分比較重要*/
.page{
  display: none;
}
.page.active{
  display: block;
}
/* page 部分比較重要*/
nav a.active, .container{
  background: #ffffd;
  border-right-color: #ffffd;
}

重點是下面的 javascript，這里 DOM 操作我們借助 jQuery

  var containers = $(".container");
  var links = $(".item");

  window.onhashchange = function(e){
    var currLink = $("[href=""+ location.hash + ""]").eq(0);
    var target = currLink.attr("data-target");

    currLink.addClass("active").siblings("a.item").removeClass("active");
    $(target).addClass("active").siblings(".page").removeClass("active");
  }

實現的邏輯不難，但是利用 hash 總是沒有所謂前端路由的那種味，必然也不是主流方法。同樣的效果如果需求簡單不考慮兼容性的話，利用 css3 中 target 偽類就可以實現，這不是本文的重點，這里就不展開了。

作為一種主流方法，我們下面看看 history 如何實現。

history 其實瀏覽器歷史棧的一個借口，去過只有 back(), forward(), 和 go() 方法實現堆棧跳轉。到了 HTML5 ， 提出了 pushState() 方法和 replaceState() 方法，這兩個方法可以用來向歷史棧中添加數據，就好像 url 變化了一樣（過去只有 url 變化歷史棧才會變化），這樣就可以很好的模擬瀏覽歷史和前進后退了。而現在的前端路由也是基于這個原理實現的。

這里我們先簡單認識一下 history：

go(n) 方法接受一個整數參數， n大于0會發生前進 n 個歷史棧頁面; n小于0會后退 -n 個歷史棧頁面；

forward() 前進一個頁面

back() 后退一個頁面

以上三個方法會靜默失敗

pushSate(dataObj, title, url) 方法向歷史棧中寫入數據，其第一個參數是要寫入的數據對象（不大于640kB)，第二個參數是頁面的 title, 第三個參數是 url (相對路徑)。這里需要說明的有3點：

當 pushState 執行一個瀏覽器的 url 會發生變化，而頁面不會刷新，只有當觸發的前進后退等事件瀏覽器才會刷新；

這里的 url 是受到同源策略限制的，防止惡意腳本模仿其他網站 url 用來欺騙用戶。所以當違背同源策略時將會報錯;

火狐目前會忽略 title 參數

replaceState(dataObj, title, url) 這個和上一個的區別就在于它不是寫入而是替換棧頂記錄，其余和 pushState 一模一樣

History 還有1個靜態只讀屬性：

History.length：當然歷史堆棧長度

還有的都是已經廢除的老古董了，這里就不提了

了解了這么多，那么可以研究一下如何利用 history 實現一個前端路由了，這里只考慮 javascript 部分，css 部分和上文一致。這里我們修改部分 html:

page1
page2
page3
paga4-1
paga4-2

我們修改了 a 標簽的 href，這樣的鏈接看上去才不是錨點了，不過這個過程我們要處理比較多的工作。首先為了簡單一些，我們的這里僅僅對 .html 或沒有擴展名結尾的鏈接設置前端路由：

// 通過委托的方法組織默認事件
var routerRxp = /.html$|/[^.]*$|/;
$(document).click(function(e){
  var href = e.target.getAttribute("href");
  if(href && routrRxp.test(href)){
    e.preventDefault();
  }
});

而后我們在點擊時把數據寫入歷史棧，并控制 class 效果：

$(document).click(function(e){
  var href = e.target.getAttribute("href");

  if(href && routerRxp.test(href)){
    var id = e.target.getAttribute("data-target");
    history.pushState({targetId: id}, "History demo", href);
    $(id).addClass("active").siblings(".page").removeClass("active");
    e.preventDefault();
  }
});

到這里，鏈接就可以點擊了，但是瀏覽器的前進后退還不能用，我們加入 onpopstate 事件：

$(window).on("popstate",function(e){
  var id = e.originalEvent.state.targetId;
  $(id).addClass("active").siblings(".page").removeClass("active");
});

這樣前進后退就可以用了，但是我們發現這樣并不能退回主頁，因為我們的主頁默認就是 page1 標簽頁，所以沒有為主頁添加 state，簡單處理就讓其自己刷新好啦：

var indexPage = location.href;
$(window).on("popstate",function(e){
  if(location.href === indexPage){
    location.reload();
  }
  var id = e.originalEvent.state.targetId;
  $(id).addClass("active").siblings(".page").removeClass("active");
});

注意，這里不能使用重置 location.href 的方法刷新，那樣就不能再前進了。

下面附上 history 方法的完整 js 代碼

var indexPage = location.href;
  var routerRxp = /.html$|/[^.]*$|/;
  $(document).click(function(e){
    var href = e.target.getAttribute("href");

    if(href && routerRxp.test(href)){
      var id = e.target.getAttribute("data-target");
      history.pushState({targetId: id}, "History demo", href);
      $(id).addClass("active").siblings(".page").removeClass("active");
      e.preventDefault();
    }
  });

$(window).on("popstate",function(e){
  if(location.href === indexPage){
    location.reload();
  }
  var id = e.originalEvent.state.targetId;
  $(id).addClass("active").siblings(".page").removeClass("active");
});

最后，關于兩種方法有一些比較重要的特性總結一下：

有的文章提到“Firfox，Chrome在頁面首次打開時都不會觸發popstate事件，但是safari會觸發該事件”，經實測現在的 safari 不存在這個問題。

Mozilla指出，在 popstate 事件中，e.originalEvent.state 屬性是存在硬盤里的，觸發該事件后讀取的歷史棧信息是通過 pushState 或 replaceState 寫入的才會有值，否則改屬性為 null。

history.state 和 e.originalEvent.state 異曲同工，而且前者可以在該事件之外任何地方隨時使用。

由于 pushSate, onpopstate 屬于 H5 的部分，存在一定兼容問題，可以使用 History.js (Github) 的 polyfill 解決這個問題。