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，它不是这个主导航的一部分，但在我的应用程序的 header 栏中这样定义：

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

由于设置 button/router link 不是底部导航的一部分，当我点击设置按钮时，它会禁用底部导航中按钮的活动状态，因为它应该因为它不是底部导航的一部分。

这是奇怪行为发生的地方：

如果我在底部导航中定义的路线之一，并且硬刷新页面，我会刷新到正确的位置。从这里开始，如果我单击设置按钮，路由器会按应有的方式显示设置，但陈旧状态底部导航栏上的活动状态仍会显示。这只会在硬刷新时发生，如果我 select 底部导航路线，然后转到设置，它会从底部导航按钮中删除活动状态。

在我的研究中，我认为这可能是路由器 link 的 exact 属性的问题，但似乎没有什么不同。

另外，我设置了一个断点，让底部导航显示在 small 和 below 上，如果我拉伸 window 隐藏底部导航，然后将它缩小到 re-show，当组件是再次显示，它具有正确的状态。

Answer 1

重新加载页面并不是重现错误的唯一方法。导航组中的按钮似乎可以通过 VItemGroup 逻辑和 VBtn 的 routable mixin 进行切换。您可以通过单击任何导航按钮两次并在之后路由到 /settings 来重现该问题。如果您检查处于该状态的元素，活动的 class 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>

Vuetify 底部导航在硬刷新后不会删除路由更改的活动状态

Vuetify bottom navigation not removing active state on route change after hard refresh

vue.js

vue-router

vuetify.js