Maison > Questions et réponses > le corps du texte
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é exact
du 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.
P粉0527243642024-03-26 12:56:54
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>