在我的应用程序中,我设置了一个底部导航组件,如下所示:
<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
,它不是底部导航的一部分,而是在我的应用程序的标题栏上定义的,如下所示:
<v-btn aria-label="Settings" icon to="/settings" > <v-icon>{{ mdiCog }}</v-icon> </v-btn>
由于设置按钮/路由链接不是底部导航的一部分,当我点击设置按钮时,它会禁用底部导航按钮的活动状态,这是正确的,因为它不是底部导航的一部分。
以下是奇怪的行为发生的地方:
如果我在底部导航定义的一个路由中,并且强制刷新页面,我会刷新到正确的位置。从这里开始,如果我点击设置按钮,路由器会显示设置,但是底部导航的旧状态仍然显示为活动状态。这只发生在强制刷新时,如果我选择底部导航路由,然后转到设置,它会从底部导航按钮中移除活动状态。
在我的研究中,我认为这可能是与路由链接的exact
属性有关的问题,但似乎没有任何区别。
另外,我设置了一个断点,以在小尺寸及以下显示底部导航栏,如果我拉伸窗口以隐藏底部导航栏,然后缩小窗口以重新显示,当组件再次显示时,它具有正确的状态。
P粉0527243642024-03-26 12:56:54
重新加载页面并不是重现这个错误的唯一方法。导航组中的按钮似乎可以通过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>