本文主要介绍了js单页hash路由原理与应用实战详解，分享给大家，具体如下：
单页，英文缩写为SPA( Single Page Application)，就是把各种功能做在一个页面内. 那所谓的单页路由应用就是：在一个页面内，通过切换地址栏的URL来实现切换内容的变化.
当url后面的锚文本发生变化时， 会触发onhashchange事件。通过这个事件，我们就可以对不同的URL 做出不同的处理。锚文本就是 URL中 #后面的内容，比如：
#/html
#/css
#/javascript
上例，我们已经通过hash( 就是锚文本 ) 变化， 触发了onhashchange事件， 就可以把hash变化 与 内容 切换对应起来，就实现了单页路由的应用！
接下来，我们通过一个小的彩票程序，来体验下单页路由：
上例，我们通过1-33个数字，生成5个随机数，放入Div中， 每次生成一组随机数就更新div的内容， 最后通过浏览器的前进，后退按钮，就可以感觉，所有的随机切换内容像是在切换不同的URL页面， 实际的效果是没有切换任何页面，完全是在一个页面中通过hash变化实现内容切换.
最后，我们结合html5简单的排版，利用hash来做一个选项卡切换的功能:
section {
width: 60%;
height: 400px;
background: #eee;
float: left;
}
sidebar {
width: 40%;
height: 400px;
background: #999;
float: left;
}
.clear {
clear: both;
}
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系列课程";
});