var fontEndRoute = function() {
return {
hashList: {},
index: null,
key: '!',
init: function() {
//初始化 绑定事件,以及调用路由回调,目的使为了跳转到index
console.log(this);
this.bindEvent();
this.reload();
},
bindEvent: function() {
var _this = this;
window.onhashchange = function() {
_this.reload();
};
},
/**
* addRouter 在路由表中新增一个路由
* @param address {String,require} 路由地址
* @param callback {Function,require} 回调 调用回调的时候也会传入对应的参数
**/
addRouter: function(address, callback) {
this.hashList[address] = callback;
},
/**
* removeRouter 在路由表中删除一个路由
* @param address {String,require} 路由地址
* @param callback {Function} 回调 调用回调的时候也会传入对应的参数
**/
removeRouter: function(address, callback) {
if (!address) return;
delete this.hashList[address];
if (callback) {
callback();
}
},
/**
* setHome 设定路由的主页面
* @param index {String,require} 路由主页面地址
**/
setHome: function(index) {
index = index ? index : 'index';
this.index = index;
},
/**
* push 路由跳转
* @param address {String,require} 跳转的地址
**/
push: function(address) {
window.location.hash = '#' + this.key + address;
},
/**
* reload 重载页面
**/
reload: function() {
//获取hash
var hash = window.location.hash;
hash = hash.replace('#' + this.key, '');
// 获取路由地址
var address = hash.split('/')[0];
// 匹配路由列表调用对应回掉函数
var callback = this.getCallback(address, this.hashList);
//如果有回调函数
if (callback) {
var params = hash.split('/');
params.shift();
callback.apply(this, params);
} else {
// 如果没有匹配到路由表 那么跳转到index
this.index && this.push(this.index);
}
},
getCallback(address, hashList) {
for (var attr in hashList) {
if (attr === address) {
return hashList[attr];
}
}
return false;
}
};
};
基于Hash方式简单的实现前端路由
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 前端路由的核心原理是更新页面但不向服务器发起请求,目前在浏览器环境中这一功能的实现主要有两种方式: 利用URL中的...