Vue-router: helper for highlighting current active link

[yyx990803]

similar to ui-router's ui-sref-active

[azamat-sharapov]

I was doing like v-class="active: route.path=='/page'" :) but helper would make it elegant probably. Also, something like route.componentName would be useful, i find myself doing route.path.split('/')[n] many times to find out which sub-route is currently active. What do you think?

[manudurgoni]

@azamat-sharapov :+1:

[yyx990803]

0e11456d33a9dd3cb0fbd9c146ac935063ebfe75

For ease of use: the active link will automatically get .v-link-active. This class name can be configured as an option when creating the router as linkActiveClass.

[azamat-sharapov]

Oh yeah, now that's really Evan. :+1:

[JosephSilber]

Would it make sense to have an option to also have the class present of a child route is active?

For example, if I have a 'users' link in my nav, I might want that to also be highlighted when I'm on 'users/:id' or 'users/create'.

[yyx990803]

@JosephSilber I'll think about that, but it would introduce additional api surface to configure this behavior. In those cases it's probably better to do something csutom like v-class="active: /^user/.test(route.path)", or even a custom directive.

[yyx990803]

Ah, actually, we can just add an additional auto class: .v-link-child-active...

Or, maybe a partial match should be the default, where exact match adds the class .v-link-active-exact

[manudurgoni]

Have you any idea why the classes do not apply on the app first init ?

Then when I navigate it updates itself!

[yyx990803]

@manudurgoni not sure, it seems to be working correctly in the example (on initial load with a matched url).

[manudurgoni]

@yyx990803 You've right :)

On initial load, my route path is : fr/categorie/slug, so it doesn't match with the destination who is : /fr/categorie/slug. And when I navigate, all is good. I just need to find why the first slash is removed on init.

EDIT : ok I fixed my code :)

[amirrustam]

@yyx990803 Any plans to include something like the .v-link-active-exact you proposed earlier?

[fnlctrl]

@amirrustam FYI in 2.0 there's exact matching mode: http://router.vuejs.org/en/api/router-link.html

[amirrustam]

@fnlctrl 🙏 Thank you. I read right passed that when reading the docs.

[l2aelba]

As 2.5.0+, Now just :
<router-link to="/" exact-active-class="is-active">Home</router-link>

Thanks @fnlctrl