强制刷新后，Vuetify底部导航无法移除活动状态，当路由发生改变时

Question

在我的应用程序中，我设置了一个底部导航组件，如下所示：

<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>

这个工作得很好，我可以像预期的那样使用它在我的应用程序中导航。当点击底部导航中的一个按钮时，按钮状态会更新，显示为活动状态（主要颜色）。

我的路由定义如下：

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' },
],

我还有一个额外的路由/settings，它不是底部导航的一部分，而是在我的应用程序的标题栏上定义的，如下所示：

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

由于设置按钮/路由链接不是底部导航的一部分，当我点击设置按钮时，它会禁用底部导航按钮的活动状态，这是正确的，因为它不是底部导航的一部分。

以下是奇怪的行为发生的地方：

如果我在底部导航定义的一个路由中，并且强制刷新页面，我会刷新到正确的位置。从这里开始，如果我点击设置按钮，路由器会显示设置，但是底部导航的旧状态仍然显示为活动状态。这只发生在强制刷新时，如果我选择底部导航路由，然后转到设置，它会从底部导航按钮中移除活动状态。

在我的研究中，我认为这可能是与路由链接的exact属性有关的问题，但似乎没有任何区别。

另外，我设置了一个断点，以在小尺寸及以下显示底部导航栏，如果我拉伸窗口以隐藏底部导航栏，然后缩小窗口以重新显示，当组件再次显示时，它具有正确的状态。

Answer 1

重新加载页面并不是重现这个错误的唯一方法。导航组中的按钮似乎可以通过VItemGroup逻辑和VBtn的routable mixin进行切换。您可以通过点击任何导航按钮两次并在此之后路由到/settings来复制该问题。如果您检查处于该状态的元素，则活动类v-btn--active会重复3次。路由到另一个页面只会删除v-btn--active v-btn--active的精确匹配项，而第三个则会保留在元素上。

显然，这不是预期的行为。

但解决方法非常简单。将每个按钮的active-class属性设置为除'v-btn--active'之外的任何值即可解决问题。

所以，例如：

<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>