摘要：什么是路由通俗點(diǎn)說(shuō)，就是不同的顯示不同的內(nèi)容什么是單頁(yè)應(yīng)用單頁(yè)，英文縮寫為，就是把各種功能做在一個(gè)頁(yè)面內(nèi)那所謂的單頁(yè)路由應(yīng)用就是在一個(gè)頁(yè)面內(nèi)，通過(guò)切換地址欄的來(lái)實(shí)現(xiàn)切換內(nèi)容的變化如何知道切換了呢當(dāng)后面的錨文本發(fā)生變化時(shí)，會(huì)觸發(fā)事件。

什么是路由？

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

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

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

如何知道URL切換了呢？

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

1 html課程 
2 css課程 
1         window.onload = function(){
2             //當(dāng)hash發(fā)生變化的時(shí)候， 會(huì)產(chǎn)生一個(gè)事件 onhashchange
3             window.onhashchange = function(){
4                 console.log( "你的hash改變了" );
5                 //location對(duì)象是 javascript內(nèi)置的(自帶的)
6                 console.log( location );
7             }
8         }

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

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

1 
2  

 1         window.onload = function(){
 2             var oBtn = document.querySelector("input");
 3             var oDiv = document.querySelector("div");
 4             //33->max  5->num
 5             function buildNum( max, num ){
 6                 var arr = [];
 7                 for( var i = 0; i < max; i++ ){
 8                     arr.push( i + 1 );
 9                 }
10                 var target = []; //從1-33這33個(gè)數(shù)字中 隨機(jī)選出5個(gè)數(shù)
11                 for( var i = 0; i < num; i++ ){
12                     target.push( arr.splice( Math.floor( Math.random() * arr.length ), 1 ) );
13                 }
14                 return target;
15             }
16             oBtn.onclick = function(){
17                 var num = buildNum( 33, 5 );
18                 oDiv.innerHTML = num;
19                 location.hash = num;
20             }
21             window.onhashchange = function(){
22                 oDiv.innerHTML = location.hash.substring(1);
23             }
24         }

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

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

1 header,
 2         footer {
 3             height: 100px;
 4             background: #ccc;
 5         }
 6 
 7         section {
 8             width: 60%;
 9             height: 400px;
10             background: #eee;
11             float: left;
12         }
13 
14         sidebar {
15             width: 40%;
16             height: 400px;
17             background: #999;
18             float: left;
19         }
20 
21         .clear {
22             clear: both;
23         }

1 

 2         頭部
 3     
 4     

 5         

 6             
全部
 7             
html課程
 8             
css課程
 9             
javascript課程
10         
11     
12     
13         右邊
14     
15     

16     

1 (function(){
 2             var Router = function(){
 3                 /*
 4                     this.routes["/"] = function(){}    
 5                     this.routes["/html"] = function(){}
 6                 */ 
 7                 this.routes = {};//用來(lái)保存路由
 8                 this.curUrl = ""; //獲取當(dāng)前的hash
 9             }
10             Router.prototype.init = function(){ //監(jiān)聽路由變化
11                 //call,apply
12                 window.addEventListener( "hashchange", this.reloadPage.bind(this) );
13             }
14             Router.prototype.reloadPage = function(){
15                 this.curUrl = location.hash.substring(1) || "/";
16                 this.routes[this.curUrl]();       
17             }
18             Router.prototype.map = function( key, callback ){ //保存路由對(duì)應(yīng)的函數(shù)
19                 this.routes[key] = callback;
20                 // console.log( this.routes );
21             } 
22             window.Router = Router;
23         })();
24 
25         var oRouter = new Router();
26         oRouter.init();
27         oRouter.map( "/", function(){
28             var oSidebar = document.querySelector("sidebar");
29             oSidebar.innerHTML = "ghostwu提供html,css,javascript從0基礎(chǔ)到精通系列課程，只要會(huì)開關(guān)機(jī)，就能學(xué)會(huì)";
30         });
31         oRouter.map("/html", function(){
32             var oSidebar = document.querySelector("sidebar");
33             oSidebar.innerHTML = "ghostwu提供html5從入門到精通的課程";
34         });
35         oRouter.map("/css", function(){
36             var oSidebar = document.querySelector("sidebar");
37             oSidebar.innerHTML = "ghostwu提供從入門到玩轉(zhuǎn)css3課程";
38         });
39         oRouter.map("/javascript", function(){
40             var oSidebar = document.querySelector("sidebar");
41             oSidebar.innerHTML = "ghostwu提供從0基礎(chǔ)到精通javascript系列課程";
42         });