本文主要介紹了js單頁hash路由原理與應用實戰詳解，分享給大家，具體如下：
什么是路由？
通俗點說，就是不同的URL顯示不同的內容
什么是單頁應用?
單頁，英文縮寫為SPA( Single Page Application)，就是把各種功能做在一個頁面內. 那所謂的單頁路由應用就是：在一個頁面內，通過切換地址欄的URL來實現切換內容的變化.
如何知道URL切換了呢？
當url后面的錨文本發生變化時， 會觸發onhashchange事件。通過這個事件，我們就可以對不同的URL 做出不同的處理。錨文本就是 URL中 #后面的內容，比如：
#/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(){ //當hash發生變化的時候， 會產生一個事件 onhashchange window.onhashchange = function(){ console.log( '你的hash改變了' ); //location對象是 javascript內置的(自帶的) console.log( location ); } }上例，我們已經通過hash( 就是錨文本 ) 變化， 觸發了onhashchange事件， 就可以把hash變化 與 內容 切換對應起來，就實現了單頁路由的應用！
接下來，我們通過一個小的彩票程序，來體驗下單頁路由：
<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個數字中 隨機選出5個數 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個數字，生成5個隨機數，放入Div中， 每次生成一組隨機數就更新div的內容， 最后通過瀏覽器的前進，后退按鈕，就可以感覺，所有的隨機切換內容像是在切換不同的URL頁面， 實際的效果是沒有切換任何頁面，完全是在一個頁面中通過hash變化實現內容切換.
最后，我們結合html5簡單的排版，利用hash來做一個選項卡切換的功能:
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; }<header> 頭部 </header> <section> <ul> <li><a href="#/" rel="external nofollow" >全部</a></li> <li><a href="#/html" rel="external nofollow" rel="external nofollow" >html課程</a></li> <li><a href="#/css" rel="external nofollow" rel="external nofollow" >css課程</a></li> <li><a href="#/javascript" rel="external nofollow" >javascript課程</a></li> </ul> </section> <sidebar> 右邊 </sidebar> <div class="clear"></div> <footer> 底部 </footer>
(function(){ var Router = function(){ /* this.routes['/'] = function(){} this.routes['/html'] = function(){} */ this.routes = {};//用來保存路由 this.curUrl = ''; //獲取當前的hash } Router.prototype.init = function(){ //監聽路由變化 //call,apply window.addEventListener( 'hashchange', this.reloadPage.bind(this) ); } Router.prototype.reloadPage = function(){ this.curUrl = location.hash.substring(1) || '/'; this.routes[this.curUrl](); } Router.prototype.map = function( key, callback ){ //保存路由對應的函數 this.routes[key] = callback; // console.log( this.routes ); } window.Router = Router; })(); var oRouter = new Router(); oRouter.init(); oRouter.map( '/', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供html,css,javascript從0基礎到精通系列課程，只要會開關機，就能學會'; }); oRouter.map('/html', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供html5從入門到精通的課程'; }); oRouter.map('/css', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = 'ghostwu提供從入門到玩轉css3課程'; }); oRouter.map('/javascript', function(){ var oSidebar = document.querySelector("sidebar"); oSidebar.innerHTML = "ghostwu提供從0基礎到精通javascript系列課程"; });以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
