VueJS 路由器 - 使用子路由和 Vuetify 时如何停止多个活动路由？

Question

我正在努力阻止默认的“Home.vue 路由在 Vuetify 中不处于活动状态，即当我单击上传或设置时，默认的 Home.vue 仍然处于活动状态。看这里：

我认为这与它是 /webapp 的子路线有关，但我正在用头撞墙..

这是我的路线中的重要部分：

    {
  path: '/webapp',
  name: 'webapp',
  component: () => import('./views/Webapp.vue'),
  children: [
          {
            path: '',
            component: () => import('./components/Home.vue'),
          },
          {
            path: 'uploads',
            component: () => import('./components/Uploads.vue'),
          },
          {
            path: 'settings',
            component: () => import('./components/Settings.vue'),
          }
  ]
}

这是我的 Vuetify 抽屉：

<v-navigation-drawer
  v-model="drawer"
  app

>
  <v-list dense>

    <v-list-item
      v-for="item in items"
      :key="item.title"
      :to="item.route"

    >
      <v-list-item-icon>
        <v-icon>{{ item.icon }}</v-icon>
      </v-list-item-icon>

      <v-list-item-content>
        <v-list-item-title>{{ item.title }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

  </v-list>
</v-navigation-drawer>

Answer 1

您必须向组件添加exact（或exact={true}）道具<v-list-item>：

<v-list-item
  v-for="item in items"
  :key="item.title"
  :to="item.route"
  exact

></v-list-item>

在v-list-item文档上exact：

与链接完全匹配。没有这个，'/' 将匹配每条路线。您可以在 vue-router 文档中找到有关确切道具的更多信息。

你可以看看：

https://vuetifyjs.com/en/components/list-item-groups#list-item-groups