Bootstrap-vue: Elements with :to attribute use 'active' class instead of vue-router classes

[claviska]

When using vue-router, the following produces dropdown items with the active class instead of the appropriate router classes:

<b-dropdown-item to="/">Home</b-dropdown-item>
<b-dropdown-item to="/about">About</b-dropdown-item>

Assuming the current path is /about:

Result:

<a href="/" class="dropdown-item active" role="menuitem" target="_self">Home</a>
<a href="/about" class="dropdown-item active" role="menuitem" target="_self">About</a>

Expected:

<a href="/" class="dropdown-item router-link-active" role="menuitem" target="_self">Home</a>
<a href="/about" class="dropdown-item router-link-exact-active" role="menuitem" target="_self">About</a>

Fiddle: https://jsfiddle.net/xpjweqg0/

This appears to be a side effect inherited from the link component, which sets both activeClass and exactActiveClass to the same value. However, the active class probably isn't desirable when router links are used in dropdown items, as it mimics the hover/focus styles.

I realize these can be overridden by specifying active-class and exact-active-class attributes on each dropdown item, but I expected the router's classes would be default.

Is this a bug or by design?

[claviska]

I just noticed that this appears to affect <b-button> and likely all elements that utilize the link component.

It's actually as simple as this: https://jsfiddle.net/xpjweqg0/3/

In this example, the button with to="/" always has an active state because the link component defaults to active for both activeClass and exactActiveClass.

[odanado]

I solved this problem by setting a different name for active-class and exact-active-class than "active".

[tmorehouse]

Bootstrap uses the class active to highlight active components, which is why, if you want vue-router to control the active state, you will need to override vue-router's active-class prop on components that you are using to props to define the destination.