Vuetify v-btn routing active class issues

Question

I'm writing a CRUD app using Vue with Vuetify. I have some links defined as v-btns using the "to" attribute. I've noticed that when clicking on buttons, the active button usually changes so that the button corresponding to the user's current location is highlighted. However, I have two routes that look like this:

"/songs/new"
"/songs"

The v-btn's have the following "to" attributes:

to:"/songs/new"
to:"/songs"

However, when clicking on the button that directs to "/songs/new", vuetify sets both buttons to be active. Any idea why it does this?

Never-mind. If anyone else stumbled on the same issue, I realized the problem was I needed to add the "exact" attribute, otherwise the "active" class is applied inclusively based on the route name. — Alex Leibowitz

Renan Coelho Renan Coelho · Accepted Answer · 2018-09-29T02:08:39

You need to make use of exact attribute.

<v-btn to="/songs/new" exact>Songs</v-btn>
<v-btn to="/songs" exact>New Song</v-btn>

Now the button will get active class only if you were in exactly route.

Also you can make use of exact-active-class to use custom active classes.

Vuetify v-btn routing active class issues

1 Answers