第一次单击浏览器返回时无法让 Iron 路由器工作

Question

我正在使用 Iron Router 从 Meteor 项目中的特定 URL 启动 Bootstrap 模式，我希望能够使用浏览器的后退和前进按钮在它们之间导航。

问题：

第一次单击浏览器的后退按钮时 Iron Router 不会触发，之后它工作正常！

我的代码：

我稍微简化了代码，但这是我在模式打开或关闭时设置 URL 的方式（这有效）。

Template.main.events({

    // modal closed -> URL to "/"
    'click.dismiss.bs.modal': function () { 
        if(window.location.pathname != "/"){
            // error prevention: 
            // click.dismiss.bs.modal also fires when user opens a modal
            window.history.pushState("", "", "/");
        }
    },

    // modal opened -> URL to "/u/username"
    'click *[data-target="#infoModal"]': function () { 
        window.history.pushState("", "", "/u/" + username);
    }

});

这是我的 router.js 代码，也有点简化。第一次按下浏览器的后退按钮时，控制台日志不会 return。

Router.route('/u/:username', {  
    name: 'u.show',
    waitOn: function () { 
        return Meteor.subscribe('users'); 
    },
    action: function () {
        console.log("Iron Router is trying to open #infoModal");
        $('#infoModal').modal('show');
    }
});

Router.route('/', {
    name: 'home.show',
    waitOn: function () {
        return Meteor.subscribe('users');
    },
    action: function () {
        console.log("Iron Router is trying to close all modals");
        $('.modal').modal('hide');
    }
});

我以前从未使用过 Iron Router，所以我真的不知道我做错了什么，非常感谢任何帮助！

Answer 1

我认为 you need to use Router.go 而不是自己操纵浏览器历史记录。这样图书馆就可以 "do the right thing" 进行内部簿记。

Template.MyButton.events({
  'click #clickme': function () {
    Router.go('/one');
  }
});

您还应该实施路线检查 using iron-router's built in facilities 让您的生活更轻松：

if(Router.current().route.getName() != 'home.show') {
    Router.go('home.show');
}

这样一来，如果您更改了 URL（例如将整个应用程序放在子路径下），那么也不必更改此代码。

第一次单击浏览器返回时无法让 Iron 路由器工作

Not able to get Iron router to work on the first time browser back is clicked

javascript

meteor

bootstrap-modal

iron-router