如何在新页面Ember js中渲染嵌套路由？

Question

我目前正在尝试使用LinkTo标记通过使用{{outlet}}到另一个新页面来呈现另一个嵌套路线。

我有一个论坛route，并且嵌套了forum details路线

在论坛模板中：

<LinkTo @route="main.forum.forum-details" @model={{post}}>{{post.title}}</LinkTo>

{{outlet}}

如上图所示。嵌套的路由将在底部而不是新页面上呈现。我如何将其呈现到新页面？我以为LinkTo实际上会将其链接到新页面，对吗？并且论坛详细信息应该在{{outlet}}标签处呈现，那么我应该在哪里放置{{outlet}}标签以使其呈现到新页面上？

Answer 1

您的问题是您需要了解nested routes。

如果您的路线为main.forum.forum-details，则意味着您的路由器如下所示：

this.route('main', function() {
  this.route('forum', function() {
    this.route('forum-details');
  });
});

因此forum路由是forum-details路由的父路由。

了解访问子路线时父路线始终可见很重要。

因此，对于main.forum.forum-details余烬，将渲染application路线，并在其{{outlet}}内渲染forum路线，并在此{{outlet}}内渲染forum-details路线。

因此，如果您想 forum 或 forum-details路线，则可以重组路线：

this.route('main', function() {
  this.route('forum');
  this.route('forum-details');
});

，或者您可以将forum路线中当前的位置移至forum.index路线中。如果某条路由包含子路由，并且没有任何子路由处于活动状态，那么将始终有index条路由可供您使用。