如何避免 Vuetify 导航抽屉总是选择索引路由为活动

Question

我有一个 nuxt.js+vuetify 应用程序，其页面结构为：

pages
  |_ dashboard
     |_ index.vue
     |_ page1.vue
     |_ page2.vue

当我使用 v-navigation-drawer 组件包含路由 /dashboard、/dasboard/page1 和 /dasboard/page2 的菜单项时（使用 :to），我的仪表板-指向项目始终保持活动状态，无论我是在 page1 还是 page2。 page1 或 page2 项在我在相应路线时正确标记为活动，但 dashboard 也始终处于活动状态。

这是我添加菜单项的方式：

        <v-list dense class="pages-list">
          <v-list-item
            v-for="(link, i) in links"
            :key="i"
            :to="link.to"
            class="v-list-item"
          >
            <v-list-item-action>
              <v-icon>{{ link.icon }}</v-icon>
            </v-list-item-action>
            <v-list-item-title
              v-text="link.text"
            />
          </v-list-item>
        </v-list>

这是我的项目数组：

      links: [
        {
          to: "/dashboard",
          icon: "mdi-home",
          text: this.$t("dashboard")
        },
        {
          to: "/dashboard/page1",
          icon: "mdi-chart-bar",
          text: this.$t("page1")
        },
        {
          to: "/dashboard/page2",
          icon: "mdi-clipboard-outline",
          text: this.$t("page2")
        },
      ],

Answer 1

将 exact 属性添加到 v-list-item 组件。

如何避免 Vuetify 导航抽屉总是选择索引路由为活动

How to avoid Vuetify navigation drawer always selecting index route as active

nuxt.js

vuetify.js