在 js 中，有一種方法，可以在不刷新頁面的情況下，頁面的內容進行變更，ajax 是一種，這里介紹另一種，就是 哈希路由原理
先看一個簡單的路由和頁面內容關聯的例子，要實現兩個功能：
1.1. 瀏覽器的路由變化，頁面內容跟着變化
1.2.頁面內容變換，瀏覽器的內容跟着變化
實現過程：
1.3.設定一個頁面按鈕，點擊按鈕時，改變頁面的內容
1.4.設定瀏覽器的內容，跟隨頁面內容的變化而變化，即：直接賦值給瀏覽器的hash屬性就可以了
1.5.監聽瀏覽器的hash值，如果hsah改變了，則頁面內容跟隨變化
代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script> 7 window.onload = function(){ 8 var getoneNum = function(start,end){ 9 var rand_num = Math.random(); 10 var range = end - start ; 11 return start + Math.round( (Math.random() * range) ); 12 }; 13 var getnums = function(start,end,n){ 14 var arr = []; 15 for(var i=0;i<n;i++){ 16 arr.push( getoneNum(start,end) ); 17 }; 18 return arr ; 19 }; 20 function Ohash(){ 21 this.ospan = document.querySelector('.ospan'); 22 this.obtn = document.querySelector('input'); 23 }; 24 Ohash.prototype.bind = function(){ 25 var that = this; 26 this.obtn.onclick = function(){ 27 location.hash = getnums(3,108,6); 28 that.ospan.innerHTML = location.hash.substring(1) ; 29 }; 30 window.onhashchange = function(){ 31 that.ospan.innerHTML = location.hash.substring(1)||'' ; 32 }; 33 }; 34 var Oha = new Ohash(); 35 Oha.bind(); 36 } 37 </script> 38 </head> 39 <body> 40 <div class='box'> 41 <input type="submit" value="觸發按鈕"> 42 <span class="ospan"></span> 43 </div> 44 </body> 45 </html>
運行結果：實現了hash 值與頁面內容的關聯變化
2.類似的，通過頁面的無刷新，僅改變頁面的 hash 值，而達到頁面內容的變更
2.1 構造一個路由函數
2.2 對路由的hash值進行監聽，如果hash 發生改變，則執行加載函數
2.3 定義路由配置規則
2.4 對路由進行初始化即調用
html 代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="./css/router.css"> 7 <script src="./js/router.js"></script> 8 <style> 9 10 </style> 11 12 </head> 13 <body> 14 <header>這里是頭部</header> 15 <nav> 16 <li><a href="#/">aluoa</a> </li> 17 <li><a href="#/01">huanying2015</a> </li> 18 <li> <a href="#/02">一代天驕</a> </li> 19 <li> <a href="#/03">霸王</a> </li> 20 <li><a href="#/04">秦始皇</a> </li> 21 <li><a href="#/05">釋迦摩尼</a> </li> 22 </nav> 23 <section> 24 如果想看路由改變效果，請點擊左邊的鏈接 25 </section> 26 <div class="clear"></div> 27 <footer>這里是尾部</footer> 28 </body> 29 </html>
css 代碼：
1 header,footer{ 2 height:5em; 3 background: #cba; 4 text-align: center; 5 line-height: 5em; 6 } 7 nav{ 8 width:20%; 9 height:30em; 10 background: #391; 11 float:left; 12 } 13 li{ 14 height:2em; 15 } 16 17 section{ 18 width:80%; 19 background: #9a1; 20 height:30em; 21 float:right; 22 line-height: 2em; 23 text-align: center; 24 } 25 .clear{ 26 clear:both; 27 }
js代碼：
1 window.onload = function(){ 2 (function(){ 3 var Router=function(){ 4 this.routes={}; 5 this.curUrl='/'; 6 }; 7 // 對路由的hash值進行監聽，如果發生改變，則調用reloadPage()函數 8 Router.prototype.init= function(){ 9 // 這里的兩個this 是不一樣的，需要注意 10 window.addEventListener('hashchange',this.reloadPage.bind(this) ); 11 }; 12 // 調用reloadPage函數，實際上時執行routes[]()函數 13 Router.prototype.reloadPage = function(){ 14 this.curUrl = location.hash.substring(1)||'/'; 15 this.routes[this.curUrl](); 16 }; 17 // 路由配置的規則 18 Router.prototype.map = function(key,callback){ 19 this.routes[key] = callback; 20 } 21 window.Router = Router; 22 })(); 23 24 var ORouter = new Router(); 25 ORouter.init(); 26 27 // 以下為路由配置的設置，形象的當做一個路由與調用函數的映射表也可以 28 ORouter.map('/',function(){ 29 var Osect = document.querySelector('section'); 30 Osect.innerHTML = "歡迎來到火星，這是一次非常的旅行，祝您路途愉快！"; 31 }); 32 ORouter.map('/01',function(){ 33 var Osect = document.querySelector('section'); 34 Osect.innerHTML = "huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 huanying2015 "; 35 }); 36 ORouter.map('/02',function(){ 37 var Osect = document.querySelector('section'); 38 Osect.innerHTML = "hehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehhehehehhehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehhehehehhehehehehheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeheheehehehheheheh"; 39 }); 40 ORouter.map('/03',function(){ 41 var Osect = document.querySelector('section'); 42 Osect.innerHTML = "nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao nihao "; 43 }); 44 ORouter.map('/04',function(){ 45 var Osect = document.querySelector('section'); 46 Osect.innerHTML = "i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine i am fine "; 47 }); 48 ORouter.map('/05',function(){ 49 var Osect = document.querySelector('section'); 50 Osect.innerHTML = "good night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night ood night "; 51 }); 52 }
運行結果：
