Après un rafraîchissement forcé, la navigation inférieure de Vuetify ne peut pas supprimer l'état actif lorsque l'itinéraire change

Question

Dans mon application, j'ai mis en place un composant de navigation inférieur comme celui-ci :

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

Cela fonctionne très bien et je peux l'utiliser pour naviguer dans mon application comme prévu. Lorsque vous cliquez sur un bouton dans la navigation inférieure, l'état du bouton est mis à jour pour afficher actif (couleur principale).

Mon itinéraire est défini comme suit :

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

J'ai également un itinéraire supplémentaire /settings qui ne fait pas partie de la navigation du bas mais est défini sur la barre de titre de mon application comme ceci :

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

Étant donné que le bouton de configuration/lien de routage ne fait pas partie de la navigation inférieure, lorsque je clique sur le bouton de configuration, cela désactive l'état actif du bouton de navigation inférieur, ce qui est correct car il ne fait pas partie de la navigation inférieure.

Voici où se produit le comportement étrange :

Si je suis dans un itinéraire défini dans la navigation du bas et que je force l'actualisation de la page, j'actualise au bon endroit. À partir de là, si je clique sur le bouton Paramètres, le routeur affiche les paramètres, mais l'ancien état de la navigation inférieure apparaît toujours comme actif. Cela ne se produit que lors de l'actualisation forcée. Si je sélectionne l'itinéraire de navigation inférieur, puis que j'accède aux paramètres, cela supprime l'état actif du bouton de navigation inférieur.

Dans mes recherches, j'ai pensé que cela pourrait être un problème avec la propriété exactdu lien de routage, mais cela ne semble pas faire de différence.

De plus, j'ai défini un point d'arrêt pour afficher la barre de navigation inférieure en petites tailles et en dessous, si j'étire la fenêtre pour masquer la barre de navigation inférieure, puis je réduis la fenêtre pour la réafficher, lorsque le composant est à nouveau affiché, il a le bon état.

Answer 1

Le rechargement de la page n'est pas le seul moyen de reproduire cette erreur. Les boutons du groupe de navigation semblent transmettre la correspondance exacte de VItemGroup逻辑和VBtn的routable mixin进行切换。您可以通过点击任何导航按钮两次并在此之后路由到/settings来复制该问题。如果您检查处于该状态的元素，则活动类v-btn--active会重复3次。路由到另一个页面只会删除v-btn--active v-btn--active, tandis que le troisième reste sur l'élément.

Évidemment, ce n’est pas un comportement attendu.

Mais la solution est très simple. Mettre chaque bouton sur une valeur autre que active-class属性设置为除'v-btn--active' fera l'affaire.

Donc, par exemple :

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