ember.js - 了解Ember Route Hook 以进行重定向

我有这个路由器设置

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)？我已经尝试过“激活”，并且没有其他运气。

当单击主导航时，能够保存上一个subnav过渡并重定向到in也是很好的。

最佳答案

因此，将路由器视为堆栈很重要。当您访问路线时，可以将路线推入/推入堆栈。被推入堆栈或从堆栈移出的项目将触发与当前过渡相关的事件。

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

导航到工作区/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路由推入堆栈中并执行其钩子(Hook)。然后它将first路由推入堆栈并执行其钩子(Hook)。 first路由的钩子(Hook)将使其从堆栈中弹出first路由，并将workspace路由推入堆栈。当您再次尝试单击workspaces路由时，它将workspace从堆栈中弹出，然后将first推回堆栈，然后再次执行其挂钩。

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