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

On Ember 3.15 (Octane)

I'm trying to create the following routes in my application

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

The first two are fine and I've been able to create them using ember-cli

ember g route cars
ember g route cars/car

The problem with the third one is that I need the model template to be shown under the cars template, ie. replace the car template. So if I put an on the car template, the model template is rendered in it fine but obviously with that nothing happens when I navigate to /cars/5/2

My router looks like this

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

I've tried using an index route ember g route cars/car/index but the problem with this that the params are not available in the index route and can only be accessed on the car route.

As plan b I've created the model route as a top level route (based on this answer), but I'd like to achieve the above because of a few reasons

• it seems more logical ie, structuring the app based on the nesting of the routes
• I have many nested routes and creating all of them as first level routes will become hard to maintain
• (probably the most important) ember doesn't apply the active class correctly with this configuration. For example if I have a navbar with Cars as an link, I'd want it to have the active styling on all three pages. But this doesn't work anymore because the second route will be called something like car and the third one something like model.