Vue-router: .v-link-active seems to be added to routes that match a given pattern, sometimes incorrect

[jwalton512]

I believe this is an issue, but could be incorrect. Given v-links with paths foo and foobar, when foobar is visited foo is still considered active.

https://jsbin.com/zukinud/edit?html,css,js,output

[yyx990803]

Yeah, that's a bug.

[JosephSilber]

BTW, can the class name handling be abstracted into a separate directive?

I find myself wanting to highlight certain elements when a route is matched, but they're not links.

[yyx990803]

@JosephSilber I'll keep that in mind, for now something like v-class="active: isActive('/a/b/c')" would probably work? (you need to implement isActive yourself)

[rrrhys]

@JosephSilber

I found a workaround for this without custom code - attach v-link to the parent element too, and it will attach the active class without any hyperlink properties.

                <li v-link="{name: 'foo', activeClass: 'active'}">
                    <a v-link="{name: 'foo'}">Foo</a>
                </li>

Correctly attaches .active to <li>

[oguzhanaslan]

@rrrhys
This solutions, redirect to the homepage. Links are not working.
vue version: 0.12.16
vue-router version: 0.7.7

[jekinney]

Had the same issue until I added exact: true. Works great now

[altafhussain10]

Why do so much repeated work, just add a little css and change the li.active > a css to be applied on li > a.active. It works great with too much changes required repeatedly.