本文主要介紹了js單頁hash路由原理與應(yīng)用實(shí)戰(zhàn)詳解，分享給大家，具體如下：

什么是路由？

通俗點(diǎn)說，就是不同的URL顯示不同的內(nèi)容

什么是單頁應(yīng)用?

單頁，英文縮寫為SPA( Single Page Application)，就是把各種功能做在一個頁面內(nèi). 那所謂的單頁路由應(yīng)用就是：在一個頁面內(nèi)，通過切換地址欄的URL來實(shí)現(xiàn)切換內(nèi)容的變化.

如何知道URL切換了呢？

當(dāng)url后面的錨文本發(fā)生變化時， 會觸發(fā)onhashchange事件。通過這個事件，我們就可以對不同的URL 做出不同的處理。錨文本就是 URL中 #后面的內(nèi)容，比如：

#/html

#/css

#/javascript

<a href="#/html" rel="external nofollow" rel="external nofollow" >html課程</a> <a href="#/css" rel="external nofollow" rel="external nofollow" >css課程</a> 

window.onload = function(){      //當(dāng)hash發(fā)生變化的時候， 會產(chǎn)生一個事件 onhashchange      window.onhashchange = function(){        console.log( '你的hash改變了' );        //location對象是 javascript內(nèi)置的(自帶的)        console.log( location );      }    }

上例，我們已經(jīng)通過hash( 就是錨文本 ) 變化， 觸發(fā)了onhashchange事件， 就可以把hash變化 與 內(nèi)容 切換對應(yīng)起來，就實(shí)現(xiàn)了單頁路由的應(yīng)用！

接下來，我們通過一個小的彩票程序，來體驗(yàn)下單頁路由：

 <input type="button" value="33選5"> <div></div>

window.onload = function(){      var oBtn = document.querySelector("input");      var oDiv = document.querySelector("div");      //33->max 5->num      function buildNum( max, num ){        var arr = [];        for( var i = 0; i < max; i++ ){          arr.push( i + 1 );        }        var target = []; //從1-33這33個數(shù)字中 隨機(jī)選出5個數(shù)        for( var i = 0; i < num; i++ ){          target.push( arr.splice( Math.floor( Math.random() * arr.length ), 1 ) );        }        return target;      }      oBtn.onclick = function(){        var num = buildNum( 33, 5 );        oDiv.innerHTML = num;        location.hash = num;      }      window.onhashchange = function(){        oDiv.innerHTML = location.hash.substring(1);      }    }

上例，我們通過1-33個數(shù)字，生成5個隨機(jī)數(shù)，放入Div中，  每次生成一組隨機(jī)數(shù)就更新div的內(nèi)容，  最后通過瀏覽器的前進(jìn)，后退按鈕，就可以感覺，所有的隨機(jī)切換內(nèi)容像是在切換不同的URL頁面， 實(shí)際的效果是沒有切換任何頁面，完全是在一個頁面中通過hash變化實(shí)現(xiàn)內(nèi)容切換.

最后，我們結(jié)合html5簡單的排版，利用hash來做一個選項(xiàng)卡切換的功能:

header,    footer {      height: 100px;      background: #ccc;    }    section {      width: 60%;      height: 400px;      background: #eee;      float: left;    }    sidebar {      width: 40%;      height: 400px;      background: #999;      float: left;    }    .clear {      clear: both;    }