如何使用hasher.js和crossroads.js重新加载路由?

时间:2015-05-21 23:32:12

标签: javascript jquery routes

我目前有这段代码:

crossroads.addRoute('/login', function(){
    $.ajax({
        url: '/login',
        type: 'GET',
        data: {

        },
        success: function(msg) {
            $('#' + main_window).html(msg);
        }
    })
});

与此hasher.js一起用于维护历史记录:

function parseHash(newHash, oldHash){
    crossroads.parse(newHash);
}
hasher.initialized.add(parseHash); //parse initial hash
hasher.changed.add(parseHash); //parse hash changes
hasher.init(); //start listening for history change

$('a').on('click', function(e) {
    e.preventDefault();
    hasher.setHash($(this).attr('href'));
});

现在,当我有一个显示#/ login并点击它的链接时,登录页面就可以正常加载了。但是,如果用户再次单击登录链接,则页面不会重新加载。我知道点击正在注册,但路由/散列并未触发。我该如何设法做到这一点?

非常感谢任何帮助。谢谢!

1 个答案:

答案 0 :(得分:3)

您没有使用hasher.setHash("#/currentpage")更改任何内容,因为您已经在该页面上。所以改变事件永远不会被解雇。你可能只是去:

$('a').on('click', function(e) {
    e.preventDefault();
    hasher.setHash('');
    hasher.setHash($(this).attr('href'));
});

但这会使历史变得混乱,因此如果您使加载方法可用,您可以强制重新加载点击:

var loadLogin = function(){
    $.ajax({
        .... your ajax settings ....
    });
};
crossroads.addRoute('/login', loadLogin);

$('a').on('click', function(e) {
    e.preventDefault();
    var newHash = $(this).attr('href');
    if(newHash === '/login' && hasher.getHash() === '/login') {
        loadLogin()
    } else {
        hasher.setHash(newHash);
    }
});

修改 正如@Patchesoft指出的那样,十字路口有一个名为ignoreState的属性,它会强制任何请求通过路由器功能,即使在当前页面上 - https://millermedeiros.github.io/crossroads.js/#crossroads-ignoreState