How to add active class only for exact routes and not parent routes in ember js?

Question

I have two routes which are nested like this.

router.js

{{config path='trans_email/ident_support/email'}}
{{config path='general/store_information/phone'}}

and couple of navbar links for these routes like this..

navbar.hbs

this.route('profile', function() {
  this.route('edit');
});

The {{#link-to 'profile' tagName="li"}}<a href>View Profile</a>{{/link-to}} {{#link-to 'profile.edit' tagName="li"}}<a href>Edit Profile</a>{{/link-to}} helper adds link-to class to the active tag here. So when I am in li route, the first link has profile class and when I am in active route, both the links have profile.edit class. (apparently because both the routes get activated when active is visited.)

How can I avoid the parent route link to get the profile.edit class when in a child route?

Basically I don't want the first link (to active) to have profile class when in active route.

Answer 1

我发现其他人是否面临同样的问题。

我刚刚将链接更改为profile并明确profile.index。

<强> navbar.hbs

{{#link-to 'profile.index' tagName="li"}}<a href>View Profile</a>{{/link-to}}
{{#link-to 'profile.edit' tagName="li"}}<a href>Edit Profile</a>{{/link-to}}

这样，在profile.edit路线中，第一个链接无法获得active类。