Nach der erzwungenen Aktualisierung kann die untere Navigation von Vuetify den aktiven Status nicht entfernen, wenn sich die Route ändert
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.
