Nach der erzwungenen Aktualisierung kann die untere Navigation von Vuetify den aktiven Status nicht entfernen, wenn sich die Route ändert

Question

In meiner App habe ich eine untere Navigationskomponente wie diese eingerichtet:

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

Das funktioniert großartig und ich kann damit wie erwartet in meiner App navigieren. Wenn in der unteren Navigation auf eine Schaltfläche geklickt wird, wird der Schaltflächenstatus aktualisiert und zeigt „aktiv“ (Primärfarbe) an.

Meine Route ist wie folgt definiert:

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

Ich habe auch eine zusätzliche Route /settings, die nicht Teil der unteren Navigation ist, sondern in der Titelleiste meiner App wie folgt definiert ist:

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

Da die Schaltfläche „Einstellungen“/der Routing-Link nicht Teil der unteren Navigation ist, wird beim Klicken auf die Schaltfläche „Einstellungen“ der aktive Status der unteren Navigationsschaltfläche deaktiviert, was richtig ist, da sie nicht Teil der unteren Navigation ist.

Hier tritt das seltsame Verhalten auf:

Wenn ich mich in einer in der unteren Navigation definierten Route befinde und die Aktualisierung der Seite erzwinge, erfolgt die Aktualisierung an der richtigen Stelle. Wenn ich von hier aus auf die Schaltfläche „Einstellungen“ klicke, zeigt der Router die Einstellungen an, aber der alte Status der unteren Navigation wird immer noch als aktiv angezeigt. Dies geschieht nur bei erzwungener Aktualisierung. Wenn ich die untere Navigationsroute auswähle und dann zu den Einstellungen gehe, wird der aktive Status von der unteren Navigationsschaltfläche entfernt.

Bei meinen Recherchen dachte ich, dass dies ein Problem mit der exactEigenschaft des Routing-Links sein könnte, aber es scheint keinen Unterschied zu machen.

Außerdem habe ich einen Haltepunkt festgelegt, um die untere Navigationsleiste in kleinen Größen und darunter anzuzeigen. Wenn ich das Fenster dehne, um die untere Navigationsleiste auszublenden, und dann das Fenster verkleinere, um es erneut anzuzeigen, hat die Komponente beim erneuten Anzeigen den richtigen Status.

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>