How can I keep a navigation link highlighted on selection in Vue.js

Question

So, I have a navigation bar with router-links. What I want is for the selected link to remain highlighted on selection, so that the users know which page they are on. Currently I have something like this.

<div class="mynav">
    <router-link to="...">...</router-link>
    ....
</div>

...

.mynav {
 ...
}

.mynav a {
 ...
}

.mynav a:hover {
 ...
}

I tried to use .mynav a:active, but that didn't work.

Answer 1

Just add this style to the style tag inside the Vue component:

<style lang="css">
    .router-link-exact-active {
        border-bottom: 1px solid #123456;
    }
</style>