How can I get the Id from the URL in an Ember Route?

I have a two panel display where I show a list of items on the left, then detail about a selected item on the right (using nested route).

My route looks like this:

Router.map(function() {
 this.route('authenticated', {path: '/'}, function() {
  this.route('bakery', function() {
   this.route('cakes', function() {
    this.route('detail', { path: '/:id' });
    });
  });
});
});

My URL looks like
http://localhost:3333/bakery/cakes/e34b3ce3

When an item is selected, it is set to "active" (temporary property on the model - default is false) and highlighted via an action on the bakery/cakes route. The detail is then shown on the right.

If I refresh the page, the item is no longer highlighted - but the detail is still shown.

Ideally I'd like to use the afterModel() hook in the bakery/cakes route to set that item back to active again, but I've been unable to get the Id to be able to do this.

I've tried the following:

• Accepted answer from here

• This question doesn't help me as the model will have reloaded and my "active" property will be false so I can't just select where active = true.

I'm using ember 2.5.0. Thanks.