通过hash实现前端路由

2018-06-24 00:04:10来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

router.js

//构造函数
function Router() {
    this.routes = {};
    this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
    this.routes[path] = callback || function(){};//给不同的hash设置不同的回调函数
};
Router.prototype.refresh = function() {
    //console.log(location.hash.slice(1));//获取到相应的hash值
    this.currentUrl = location.hash.slice(1) || '/';//如果存在hash值则获取到,否则设置hash值为/
    // console.log(this.currentUrl);
    this.routes[this.currentUrl]();//根据当前的hash值来调用相对应的回调函数
};
Router.prototype.init = function() {
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//给window对象挂载属性
window.Router = new Router();
window.Router.init();

html:

<div class="index">
    <a href="#/upload">上传图片</a>
</div>
<div class="upload_page" style="display:none">
    <h2>上传图片</h2>
</div>

 

//前端路由
    Router.route('/', function() {        
        $('.upload_page').hide();
        $('.index').show();
    });

    Router.route('/upload', function() {
        $('.index').hide();
        $('.upload_page').show();
    });
    

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用canvas进行图像编辑

下一篇:js 数组去重