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中的...