Question

我有这个路由器设置

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

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

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然后＆＃34; afterModel＆＃34;钩子没有被调用，我最终在dashboard.workspaces，这是不需要的空页面。是否还会有其他钩子？我已经尝试过＆＃34;激活＆＃34;很少有人没有运气。

能够保存最后一个subnav转换并在点击主导航时重定向到in也不错。

Answer 1

因此将路由器视为堆栈非常重要。当您访问路线时，您可以在堆栈上打开/关闭路线。正在向上或向下推送的项目将触发与当前过渡相关的事件。

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

导航到工作区/workspaces（重定向到第一个工作区/workspaces/1）
导航到第二个工作区/workspaces/2
在/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'});
});

从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路径推入堆栈执行其挂钩。然后它会将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。

Undestanding Ember Route挂钩重定向

2 个答案: