在講前端路由之前，先說下后端路由，以及為什么出現了前端路由。
后端路由： 瀏覽器在地址欄中切換不同的url時，每次都向后臺服務器發出請求，服務器響應請求，在后臺拼接html文件傳給前端顯示，java web中的jsp就是如此實現的。常用的后臺MVC模式的基本路由處理流程：瀏覽器輸入一個url請求，從中找到Controller和Action的值，將請求傳遞給Controller處理，Controller獲取Model數據對象，并且將Model傳遞給View,最后View呈現界面。
例如輸入一個url：localhost/home/index
其中localhost是域名，對應結構{controller}/{action}/{id}
前端路由： 隨著（SPA）單頁應用的不斷普及，前后端開發分離，目前項目基本都使用前端路由，在項目使用期間頁面不會重新加載。
前端路由目前主要有兩種方法：
1、利用url的hash,就是常用的錨點（#）操作，類似頁面中點擊某小圖標，返回頁面頂部，JS通過hashChange事件來監聽url的改變，IE7及以下需要輪詢進行實現。一般常用框架的路由機制都是用的這種方法，例如Angualrjs自帶的ngRoute和二次開發模塊ui-router，react的react-route,vue-route…
2、利用HTML5的History模式，使url看起來類似普通網站，以”/”分割，沒有”#”，但頁面并沒有跳轉，不過使用這種模式需要服務器端的支持，服務器在接收到所有的請求后，都指向同一個html文件，通過historyAPI，監聽popState事件，用pushState和replaceState來實現。
SPA 前端路由原理與實現方式
通常 SPA 中前端路由有2中實現方式，本文會簡單快速總結這兩種方法及其實現：
Hash
我們都知道 url 中可以帶有一個 hash， 比如下面 url 中的 page2
https://www.abc.com/index.html#page2
window 對象中有一個事件是 onhashchange，以下幾種情況都會觸發這個事件：
這個事件有 2 個重要的屬性：oldURL 和 newURL，分別表示點擊前后的 url
<!-- 該頁面路徑為 https://www.abc.com/index.html --><a href="#page2" rel="external nofollow" rel="external nofollow" >click me</a><script type="text/javascript"> window.onhashchange = function(e){ console.log(e.oldURL); //https://www.abc.com/index.html console.log(e.newURL); //https://www.abc.com/index.html#page2 }</script>這樣我們可以這樣建立一個 DOM
<nav> <a class="item active" href="#page1" rel="external nofollow" data-target="#index">page1</a> <a class="item" href="#page2" rel="external nofollow" rel="external nofollow" data-target="#info">page2</a> <a class="item" href="#page3" rel="external nofollow" data-target="#detail">page3</a> <a class="item" href="#page4" rel="external nofollow" data-target="#show">paga4</a> <a class="item" href="#page5" rel="external nofollow" data-target="#contact">paga5</a> </nav> <div class="container"> <div class="page active" id="index"> <h1>This is index page</h1> </div> <div class="page" id="info"> <h1>This is info page</h1> </div> <div class="page" id="detail"> <h1>This is detail page</h1> </div> <div class="page" id="show"> <h1>This is show page</h1> </div> <div class="page" id="contact"> <h1>This is contact page</h1> </div> </div>
為了好看我們加上 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: #ddd; border-right-color: #ddd;}重點是下面的 javascript，這里 DOM 操作我們借助 jQuery
var containers = $('.container'); var links = $('.item'); window.onhashchange = function(e){ var currLink = $('[href="'+ location.hash + '" rel="external nofollow" ]').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 如何實現。
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點：
replaceState(dataObj, title, url) 這個和上一個的區別就在于它不是寫入而是替換棧頂記錄，其余和 pushState 一模一樣
History 還有1個靜態只讀屬性：
History.length：當然歷史堆棧長度
還有的都是已經廢除的老古董了，這里就不提了
了解了這么多，那么可以研究一下如何利用 history 實現一個前端路由了，這里只考慮 javascript 部分，css 部分和上文一致。這里我們修改部分 html:
<a class="item active" href="/page1.html" rel="external nofollow" data-target="#index">page1</a><a class="item" href="/page2.html" rel="external nofollow" data-target="#info">page2</a><a class="item" href="/page3.html" rel="external nofollow" data-target="#detail">page3</a><a class="item" href="/page4/subpage1.html" rel="external nofollow" data-target="#show">paga4-1</a><a class="item" href="/page5/subpage2.html" rel="external nofollow" data-target="#contact">paga4-2</a>
我們修改了 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');});最后，關于兩種方法有一些比較重要的特性總結一下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
