了解 Ember Route 挂钩以进行重定向

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”钩子，我最终进入了dashboard.workspaces，这是不需要的空白页面。还有其他总是会被调用的钩子吗？我已经尝试过“激活”和其他几个没有运气的人。

如果能够保存最后一个子导航转换并在单击主导航时重定向到，那也很好。

Answer 1

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

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

1. 导航到工作区/workspaces（它重定向到第一个工作区/workspaces/1）
2. 导航到第二个工作区/workspaces/2
3. 在/workspaces/2 上刷新页面（当它位于工作区的afterModel 挂钩时，它会重定向到第一个工作区/workspaces/1）

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

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

从workspaces路由中移除afterModel逻辑，放到workspaces.first路由中。

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

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

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

现在，当您在仪表板中并单击它时，它会将workspaces 路由推入堆栈执行其挂钩。然后它将first 路由推入堆栈并执行其钩子。 first 路由的钩子将导致它从堆栈中弹出 first 路由并将workspace 路由压入堆栈。当您再次尝试单击workspaces 路由时，它会将workspace 从堆栈中弹出，然后将first 推回堆栈，然后再次执行其钩子。

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

Answer 2

可能有点晚了，但对于像我一样寻找解决这个空白页面的人来说。

Ember 提供了一个隐式/隐藏的路由，可以用来代替创建一个新的路由，这对这个非常有用。 在这个问题的情况下它会是DashboardWorkspacesIndexRoute，不需要在路由器中声明它，只需添加带有您想要的重定向的路由文件

export default Ember.Route.extend({
    redirect() {
       let first = this.modelFor('workspaces').get('firstObject');
       this.replaceWith('dashboard.workspaces.workspace', first);
    }
}

然后您可以使用{{link-to 'Workspaces' 'dashboard.workspaces'}}，它将保留active 类，同时仍然每次都重定向。

欲了解更多信息，here's the source。