After forced refresh, Vuetify bottom navigation cannot remove the active state when the route changes

Question

In my app, I have a bottom navigation component set up like this:

<v-bottom-navigation
  v-else
  background-color="overlay"
  grow
  app
  color="primary"
>
  <v-btn
    v-for="(route, key) in routes"
    ref="link"
    :key="'route' + key"
    :to="route.to"
    min-width="48"
    class="px-0"
  >
    <span v-if="$vuetify.breakpoint.smAndUp">{{ route.name }}</span>
    <v-icon>{{ route.icon }}</v-icon>
  </v-btn>
</v-bottom-navigation>

This works great and I can use it to navigate within my app as expected. When a button in the bottom navigation is clicked, the button status updates to show active (primary color).

My route is defined as follows:

routes: [
  { icon: mdiViewDashboard, name: 'Dashboard', to: '/dashboard' },
  { icon: mdiCart, name: 'Orders', to: '/orders' },
  { icon: mdiDolly, name: 'Receiving', to: '/receiving' },
  { icon: mdiClipboardText, name: 'Tasks', to: '/tasks' },
  { icon: mdiTruck, name: 'Deliveries', to: '/deliveries' },
],

I also have an additional route /settings that is not part of the bottom navigation but is defined on the title bar of my app like this:

<v-btn
  aria-label="Settings"
  icon
  to="/settings"
>
  <v-icon>{{ mdiCog }}</v-icon>
</v-btn>

Since the settings button/route link is not part of the bottom navigation, when I click the settings button it disables the bottom navigation button's active state, which is correct because it is not part of the bottom navigation.

Here's where the strange behavior occurs:

If I'm in a route defined in the bottom navigation, and I force refresh the page, I refresh to the correct location. From here, if I click the settings button, the router shows the settings, but the old status of the bottom navigation still shows as active. This only happens on force refresh, if I select the bottom navigation route and then go to settings, it removes the active state from the bottom navigation button.

In my research I thought this might be an issue with the exact attribute of the routing link, but it doesn't seem to make any difference.

Also, I set a breakpoint to show the bottom navbar at small sizes and below, if I stretch the window to hide the bottom navbar, then shrink the window to redisplay, when the component is shown again, it has the correct status.

Answer 1

Reloading the page is not the only way to reproduce this error. Buttons in the navigation group appear to be toggled via VItemGroup logic and VBtn's routable mixin. You can replicate the issue by clicking any navigation button twice and routing to /settings after that. If you check an element in that state, the active class v-btn--active is repeated 3 times. Routing to another page will only remove the exact match of v-btn--active v-btn--active, while the third one will remain on the element.

Obviously, this is not expected behavior.

But the solution is very simple. Setting the active-class attribute of each button to any value other than 'v-btn--active' will solve the problem.

So, for example:

<v-btn
    v-for="(route, key) in routes"
    ref="link"
    :key="'route' + key"
    :to="route.to"
    min-width="48"
    class="px-0"
    active-class=""
>
    <span v-if="$vuetify.breakpoint.smAndUp">{{ route.name }} </span>
    <v-icon>{{ route.icon }}</v-icon>
</v-btn>