ember.js - 了解用于重定向的 Ember Route Hook

Question

我有这个路由器设置

this.route('dashboard', function () {
    this.route('numbers');
    this.route('workspaces', function () {
        this.route('workspace', {path: '/:wid'});
});

dashboard.workspaces 是导航栏中的链接。当您单击时，它会加载dashboard.workspaces.workspace 并立即重定向到第一个子导航。我这样做是这样的:

export default Ember.Route.extend({

     model: function() {
         return this.modelFor('dashboard');
     },

     afterModel: function(model) {
         this.transitionTo('dashboard.workspaces.workspace', model.get('workspaces.firstObject.id'));
     }
}

这一切都很好，除了当我已经在dashboard.workspaces.workspace路线上并单击dashboard.workspaces时，然后“afterModel”钩子(Hook)不会被调用，我最终会在dashboard.workspaces上，这是不需要的空页面。还有其他总是会被调用的钩子(Hook)吗？我已经尝试过“激活”和其他一些方法，但没有成功。

如果能够保存最后的子导航转换并在单击主导航时重定向到，那就太好了。

Answer 1

因此，将路由器视为一个堆栈非常重要。当您访问路线时，您会将路线插入/推出堆栈。被插入或推出堆栈的项目将触发与当前转换相关的事件。

在您的特定情况下，当前的实现有两个问题。您已经提到的一个问题是，当您弹出子路由时，父路由不会触发任何事件。在这种情况下就会出现第二个问题。

1. 导航到工作区 /workspaces (它重定向到第一个工作区 /workspaces/1 )
2. 导航到第二个工作区 /workspaces/2
3. 打开 /workspaces/2 时刷新页面(当它位于工作区的 afterModel Hook 时，它会重定向到第一个工作区 /workspaces/1 )

因此，处理此问题的最简单方法是在 workspaces 下创建子路由其唯一目的是重定向到第一个工作区的路线。

this.route('dashboard', function () {
    this.route('numbers');
    this.route('workspaces', function () {
        this.route('first');
        this.route('workspace', {path: '/:wid'});
});

删除afterModel逻辑来自workspaces路由并将其放入 workspaces.first路线。

export default Ember.Route.extend({
  redirect: function() {
     var first = this.modelFor('workspaces').get('firstObject');
     this.transitionTo('dashboard.workspaces.workspace', first);
  }
}

现在在您的模板中，而不是指向 workspaces你会指向 workspaces.first .

{{link-to 'Workspaces' 'dashboard.workspaces.first'}}

现在，当您在仪表板中单击它时，它将推送 workspaces路由到堆栈中执行它的钩子(Hook)。然后它将推送 first路由到堆栈并执行其钩子(Hook)。 first的钩子(Hook)路线将导致它弹出 first从堆栈中路由并推送 workspace路由到堆栈上。当您尝试单击workspaces时再次路由它会弹出workspace出栈，然后推送 first返回到堆栈，然后将再次执行其 Hook 。

示例:http://emberjs.jsbin.com/cipawapali/edit?html,js,output