什么是路由？
通俗点说，就是不同的URL显示不同的内容
什么是单页应用?
单页，英文缩写为SPA( Single Page Application)，就是把各种功能做在一个页面内. 那所谓的单页路由应用就是：在一个页面内，通过切换地址栏的URL来实现切换内容的变化.
如何知道URL切换了呢？
当url后面的锚文本发生变化时， 会触发onhashchange事件。通过这个事件，我们就可以对不同的URL 做出不同的处理。锚文本就是 URL中 #后面的内容，比如：
#/html
#/css
#/javascript
1 <a href="#/html">html课程</a>
2 <a href="#/css">css课程</a>
1 window.onload = function(){
2 //当hash发生变化的时候， 会产生一个事件 onhashchange
3 window.onhashchange = function(){
4 console.log( '你的hash改变了' );
5 //location对象是 javascript内置的(自带的)
6 console.log( location );
7 }
8 }
上例，我们已经通过hash( 就是锚文本 ) 变化， 触发了onhashchange事件， 就可以把hash变化 与 内容 切换对应起来，就实现了单页路由的应用！
接下来，我们通过一个小的彩票程序，来体验下单页路由：
1 <input type="button" value="33选5">
2 <div></div>
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个数字中 随机选出5个数
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 }
上例，我们通过1-33个数字，生成5个随机数，放入Div中， 每次生成一组随机数就更新div的内容， 最后通过浏览器的前进，后退按钮，就可以感觉，所有的随机切换内容像是在切换不同的URL页面， 实际的效果是没有切换任何页面，完全是在一个页面中通过hash变化实现内容切换.
最后，我们结合html5简单的排版，利用hash来做一个选项卡切换的功能:
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 <header>
2 头部
3 </header>
4 <section>
5 <ul>
6 <li><a href="#/">全部</a></li>
7 <li><a href="#/html">html课程</a></li>
8 <li><a href="#/css">css课程</a></li>
9 <li><a href="#/javascript">javascript课程</a></li>
10 </ul>
11 </section>
12 <sidebar>
13 右边
14 </sidebar>
15 <div class="clear"></div>
16 <footer>
17 底部
18 </footer>
1 (function(){
2 var Router = function(){
3 /*
4 this.routes['/'] = function(){}
5 this.routes['/html'] = function(){}
6 */
7 this.routes = {};//用来保存路由
8 this.curUrl = ''; //获取当前的hash
9 }
10 Router.prototype.init = function(){ //监听路由变化
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 ){ //保存路由对应的函数
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基础到精通系列课程，只要会开关机，就能学会';
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提供从入门到玩转css3课程';
38 });
39 oRouter.map('/javascript', function(){
40 var oSidebar = document.querySelector("sidebar");
41 oSidebar.innerHTML = "ghostwu提供从0基础到精通javascript系列课程";
42 });