本文主要介绍js单页哈希路由的原理和实战解读，分享给大家。 详情如下所示：
什么是路线？
简单来说，不同的URL显示不同的内容。
什么是单页应用程序？
单页面javascript 单页应用，中文缩写SPA（SinglePageApplication），就是将各种功能集成到一个页面中。 所谓单页面路由应用就是：在一个页面内，通过切换地址栏的URL来改变切换内容。
怎么知道网址已经切换了？
当URL旁边的锚文本发生变化时，就会触发onhashchange风暴。 通过这次风暴，我们可以对不同的URL进行不同的处理。 锚文本是URL中#之前的内容，例如：
#/html
#/css
#/javascript
html课程 css课程
window.onload = function(){
//当hash发生变化的时候， 会产生一个事件 onhashchange
window.onhashchange = function(){
console.log( '你的hash改变了' );
//location对象是 javascript内置的(自带的)
console.log( location );
}
}
在上面的例子中，我们已经通过哈希（即锚文本）更改触发了onhashchange风暴。 然后我们就可以将hash的变化映射到内容的切换，从而实现单页路由的应用！
接下来我们用一个体育彩票小程序来体验一下单页路由：
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 的内容都会更新。 最后，通过按下浏览器的前进和后退按钮javascript 单页应用，你可以感觉到，所有内容的随意切换就像切换不同的URL页面一样。 实际效果是没有页面切换，完全通过一页的hash变化实现内容切换。
最后我们结合HTML5的简单排版，利用hash来创建一个tab切换功能：
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;
}
头部 右边
(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系列课程";
});
以上就是本文的全部内容。 希望对你的学习有所帮助，也希望你多多支持我。
