Why is there a problem with router-link-active?

Question

Vue.js

I am initializing the project with vue init webpack my-project .
I make a horizontal menu and write in it:

<router-link to="/"></router-link>
<router-link to="/about"></router-link>
<router-link to="/team"></router-link>
<router-link to="/contacts"></router-link>

And I want to highlight the active menu item with an underline, but when switching between routes, the new item on which I clicked becomes active, and the very first one also remains active, i.e. 2 menu items still have class="router-link-active".
Has anyone come across? How to decide?

Answer 1

In the first one in the tag after to="/" write exact
All your items contain "/", so the first one is highlighted along with the rest

Answer 2

You can just IMHO remove the slash for the first route.