The `router-link-active` classname unexpectedly applies to a <router-link> which is pointing to `/`

Question

I have set up very basic routing on a Vue project using vue-router.

The router-link-active classname gets applied as expected to the active root. In the following gif, that would be 'Foo' when /foo is active, etc.

However, the link to 'Hello world' also has the router-link-active classname.

Why does it get applied and how can I ensure it's only active when I am on / (localhost:8080)?

Answer 1

Put exact prop to your "/" route

The default active class matching behavior is inclusive match. For example, will get this class applied as long as the current path starts with /a.

One consequence of this is that will be active for every route! To force the link into "exact match mode", use the exact prop:

<!-- this link will only be active at / -->
    <router-link to="/" exact>

Here is what you need: jsFiddle