本文主要介绍了js单页hash路由原理与应用实战详解，分享给大家，具体如下：
什么是路由？
通俗点说，就是不同的URL显示不同的内容
什么是单页应用?
单页，英文缩写为SPA( Single Page Application)，就是把各种功能做在一个页面内. 那所谓的单页路由应用就是：在一个页面内，通过切换地址栏的URL来实现切换内容的变化.
如何知道URL切换了呢？
当url后面的锚文本发生变化时， 会触发onhashchange事件。通过这个事件，我们就可以对不同的URL 做出不同的处理。锚文本就是 URL中 #后面的内容，比如：
#/html
#/css
#/javascript
rush:js;">
window.onload = function(){
//当hash发生变化的时候， 会产生
一个事件 onhashchange
window.onhashchange = function(){
console.log( '你的hash改变了' );
//location对象是 javascript内置的(
自带的)
console.log( location );
}
}
上例，我们已经通过hash( 就是锚文本 ) 变化， 触发了onhashchange事件， 就可以把hash变化 与 内容 切换对应起来，就实现了单页路由的应用！
接下来，我们通过一个小的彩票程序，来体验下单页路由：
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);
}
}
rush:xhtml;">
右边
rush:js;">
(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从<a href="https://www.jb51.cc/tag/rumendaojingtong/" target="_blank" class="keywords">入门到精通</a>的课程';
});
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系列课程";
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
