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

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

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