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 属性可能存在问题，但似乎没有什么不同。

另外，我设置了一个断点来在small和below上显示底部导航，如果我拉伸窗口以隐藏底部导航，然后将其缩小以重新显示，当组件再次显示时，它具有正确的状态.

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>