嵌套索引路由未在出口中正确呈现

Question

我正在尝试在 taking-cash 的 {{outlet}}:

中渲染 taking-cash/index

router.js:

  this.route('retirement-options', function () {
    this.route('taking-cash');

除非我明确指定 /index 路径，否则它不会在插座内呈现：

  this.route('retirement-options', function () {
    this.route('taking-cash', function() {
      this.route('index', { path: '' });
    });
  });

为什么/index不是隐含的，我可以不在router.js中指定吗？

Answer 1

Ember 仅为至少有一个其他子路由的路由自动提供索引路由。

让我们看看你的例子：

  this.route('retirement-options', function () {
    this.route('taking-cash');
  });

这将创建三个路由：

retirement-options.index 和 retirement-options.taking-cash 都共享相同的父路由 retirement-options.

retirement-options 本身不可导航。它将始终解析为 retirement-options.index 路由，除非转换目标 taking-cash 子路由明确。

只要您向 retirement-options.taking-cash 添加另一个子路由，Ember 就会自动为其创建一个索引路由。

您可以通过创建路线来强制执行显式索引路线，如您所示。但是将索引路由作为唯一的叶节点并没有太大的价值。

Answer 2

Ember 确实会自动为路由提供一个索引路由，但它不需要专门有一个子路由。它实际上是必须存在的回调函数。

所以看看这个例子，

this.route('retirement-options', function() {
  this.route('taking-cash', function() {
    this.route('index', { path: '' });
  });
});

索引部分不是特别强制的。一旦声明了回调函数，索引就会在那里。

这与上面的示例完全相同。

this.route('retirement-options', function() {
  this.route('taking-cash', function() {});
});

Nested index route not rendering in outlet properly