如何使用 ember.js 创建嵌套动态路由，其中 child 路由替换了 parent 的模板？

Question

在 Ember 3.15 (Octane)

我正在尝试在我的应用程序中创建以下路由

/cars
/cars/:car_id
/cars/:car_id/:model_id

前两个很好，我已经能够使用 ember-cli

创建它们

ember g route cars
ember g route cars/car

第三个的问题是我需要 model 模板显示在 cars 模板下，即。替换 car 模板。因此，如果我在 car 模板上放置一个 {{outlet}}，model 模板会在其中正常呈现，但显然 {{outlet}} 当我导航到 [=25= 时没有任何反应]

我的路由器是这样的

Router.map(function() {
  this.route('cars', function(){
    this.route('car', { path: ':car_id'}, function() {
      this.route('model', { path: ':model_id' });
    });
  });
});

我试过使用索引路由 ember g route cars/car/index 但问题是 params 在 index 路由中不可用，只能在 car路线。

作为计划 b，我已将汽车和模型路线创建为顶级路线 ()，但由于一些原因我想实现上述目标

这似乎更合乎逻辑，即根据路由的嵌套构建应用程序
我有许多嵌套路由，将它们全部创建为一级路由将变得难以维护
ember 未使用此配置正确应用 active class。例如，如果我有一个带有 Cars 作为 link 的导航栏，我希望它在所有三个页面上都具有 active 样式。但这不再有效，因为第二条路线将被称为 car，第三条路线将被称为 model.
默认使用 <LinkTo /> 创建的 url 存在一些问题。

所以如果我的 car 模板中有这样的东西

<ul>
  {{#each @model.models as |model|}}
    <li><LinkTo @route="model" @model={{model}}> {{model.title}} </LinkTo></li>
  {{/each}}
</ul>

实际 link 正常工作，因为它将我带到正确的模型页面，但是，url 显示为 /cars/undefined/undefined。（虽然这可以通过传递 @models={{array @model.id model.id}} 来解决，但在这一点上似乎是一种解决方法）

Answer 1

解决方案确实是使用 index 路线。

cars.car.index 和 cars.car.model 也是如此。但是，您应该使用 cars.car 路由来加载通用 car 模型。然后你可以在 cars.car.index 路由中使用 this.modelFor('cars.car').

访问它

然后就可以在cars.car路由访问params.car_id，用它来加载车，然后从cars.car.index和cars.car.model路由访问这辆车modelFor.

如何使用 ember.js 创建嵌套动态路由，其中​​ child 路由替换了 parent 的模板？

How do you create nested dynamic routes with ember.js where child route replaces parent's template?

ember.js

如何使用 ember.js 创建嵌套动态路由，其中 child 路由替换了 parent 的模板？