前言
前端路由在很多開源的js類庫框架中都得到支持，如angularJS，Backbone，Reactjs等等。前端路由和後端路由原理一樣，是讓所有的交互和展現在一個頁面運行以達到減少服務器請求，提高客戶體驗的目的，越來越多的網站特別是web應用都用到了前端路由。
HTML
頁面中有一個導航菜單ul，和一個div#result用來顯示結果，當點擊導航菜單時，#result中會顯示不同的結果內容。
<ul> <li><a href="#/">首頁</a></li> <li><a href="#/product">產品</a></li> <li><a href="#/server">服務</a></li> </ul><div id="result"></div>
JAVASCRIPT
說一下前端路由實現的簡要原理，以hash 形式（也可以使用History API 來處理）為例，當url 的hash 發生變化時，觸發hashchange 註冊的回調，回調中去進行不同的操作，進行不同的內容的展示。
function Router(){ this.routes = {}; this.curUrl = ''; this.route = function(path, callback){ this.routes[path] = callback || function(){}; }; this.refresh = function(){ this.curUrl = location.hash.slice(1) || '/'; this.routes[this.curUrl](); }; this.init = function(){ window.addEventListener('load', this.refresh.bind(this), false); window.addEventListener('hashchange', this.refresh.bind(this), false); }}上面代碼中路由系統Router對象實現，主要提供三個方法：
init監聽瀏覽器url hash 更新事件。
route存儲路由更新時的回調到回調數組routes中，回調函數將負責對頁面的更新。
refresh執行當前url對應的回調函數，更新頁面。
Router調用方式如下：
點擊觸發url 的hash 改變，並對應地更新內容，運行後你會發現每次點擊菜單時，#result中會變換背景色和內容。
var R = new Router();R.init();var res = document.getElementById('result'); R.route('/', function() { res.style.background = 'blue'; res.innerHTML = '這是首頁'; }); R.route('/product', function() { res.style.background = 'orange'; res.innerHTML = '這是產品頁'; }); R.route('/server', function() { res.style.background = 'black'; res.innerHTML = '這是服務頁'; });總結
以上為一個前端路由的簡單實現，實際應用中，應該對hash進行正則匹配處理，以滿足大量url的應用，同時增加ajax異步請求頁面內容等功能。雖然這個實例非常簡單，但實際上很多路由系統的根基都立於此，其他路由系統主要是對自身使用的框架機制進行配套及優化。好了，本文的內容到這就結束了，希望能對大家的學習或者工作帶來一定的幫助，如果有疑問大家可以留言交流。