強制刷新後，Vuetify底部導覽無法移除活動狀態，當路由改變時

Question

在我的應用程式中，我設定了一個底部導航元件，如下所示：

<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屬性有關的問題，但似乎沒有任何區別。

另外，我設定了一個斷點，以在小尺寸及以下顯示底部導覽欄，如果我拉伸視窗以隱藏底部導覽欄，然後縮小視窗以重新顯示，當組件再次顯示時，它具有正確的狀態。

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>