hash路由

最新推荐文章于 2024-04-01 19:46:36 发布

weixin_30488085

最新推荐文章于 2024-04-01 19:46:36 发布

阅读量132

点赞数

原文链接：http://www.cnblogs.com/CoderZX/p/11206027.html

版权

class HashRouter{
　　constructor(){
　　//用于存储不同hash值对应的回调函数
　　this.routers = {};
　　window.addEventListener('hashchange',this.load.bind(this),false)
}
//用于注册每个视图
register(hash,callback = function(){}){
　　this.routers[hash] = callback;
}
//用于注册首页
registerIndex(callback = function(){}){
　　this.routers['index'] = callback;
}
//用于处理视图未找到的情况
registerNotFound(callback = function(){}){
　　this.routers['404'] = callback;
}
//用于处理异常情况
registerError(callback = function(){}){
　　this.routers['error'] = callback;
}
//用于调用不同视图的回调函数
load(){
　　let hash = location.hash.slice(1),
　　handler;
//没有hash 默认为首页
if(!hash){
　　handler = this.routers.index;
}
//未找到对应hash值
else if(!this.routers.hasOwnProperty(hash)){
　　handler = this.routers['404'] || function(){};
}
else{
　　handler = this.routers[hash]
}
//执行注册的回调函数
try{
　　handler.apply(this);
　}catch(e){
　　console.error(e);
　　(this.routers['error'] || function(){}).call(this,e);
　　　　}
　　}
}
//HTML

<body>
    <div id="nav">
         <a href="#/page1">page1</a>
         <a href="#/page2">page2</a>
         <a href="#/page3">page3</a>
        <a href="#/page4">page4</a>
        <a href="#/page5">page5</a>
     </div>
     <div id="container"></div>
</body>

//js实现
let router = new HashRouter();
let container = document.getElementById('container');

//注册首页回调函数
router.registerIndex(()=> container.innerHTML = '我是首页');

//注册其他视图回到函数
router.register('/page1',()=> container.innerHTML = '我是page1');
router.register('/page2',()=> container.innerHTML = '我是page2');
router.register('/page3',()=> container.innerHTML = '我是page3');
router.register('/page4',()=> {throw new Error('抛出一个异常')});

//加载视图
router.load();
//注册未找到对应hash值时的回调
router.registerNotFound(()=>container.innerHTML = '页面未找到');
//注册出现异常时的回调
router.registerError((e)=>container.innerHTML = '页面异常，错误消息：<br>' + e.message);

hash 路由可以兼容到IE8如果需求兼容到IE8就使用hash路由，如果没要求建议使用history路由

转载于:https://www.cnblogs.com/CoderZX/p/11206027.html

weixin_30488085

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hash路由

class HashRouter{ 　　constructor(){ 　　//用于存储不同hash值对应的回调函数　　this.routers = {}; 　　window.addEventListener('hashchange',this.load.bind(this),false) } //用于注册每个视图 reg...
复制链接

扫一扫