选择 v-list-group 项时从 v-list-item 中删除活动 class

Question

将 Vuetify v-list-item 指令（外部）与 v-list-group 中的其他 v-list-item 一起用于路由网站页面我遇到了这个问题：

路由工作正常，但每次我单击其中一个子菜单时，索引项仍然处于活动状态

当 Index selected

当另一个项目 selected

我想知道当我 select v-list-item 中的 v-list-item 时，是否可以做些什么来停用索引菜单 v-list-item 的活动 class列表组

这是我的代码：

DOM:

<v-navigation-drawer v-model="drawer" app dark>
<v-list>
      <div
        v-for="item in pages"
        :key="item.title"
      >
      <!-- Index -->
      <v-list-item
        v-if="!item.items"
        link
        :to="item.href"
        v-on="on"
      >
        <v-list-item-icon>
          <v-icon color="info">
            {{item.icon}}
          </v-icon>
        </v-list-item-icon>
        <v-list-item-title class="info--text" v-text="item.title">
        </v-list-item-title>
      </v-list-item>
      <!-- group menues -->
      <v-list-group
        v-if="item.items"
        item-color="primary"
        no-action
      >
        <template v-slot:activator>
          <v-icon color="info" style="padding-right:32px">
            {{item.icon}}
          </v-icon>
            <v-list-item-content>
              <v-list-item-title class="info--text" v-text="item.title"></v-list-item-title>
            </v-list-item-content>
        </template>
        <v-list-item
          item-color="primary"
          v-for="child in item.items"
          :key="child.title"
          link
          :to="child.href"
          style="padding-left:40px"
        >
          <v-list-item-icon>
            <v-icon color="info">mdi-circle-medium</v-icon>
          </v-list-item-icon>
            <v-list-item-content v-on="on">
              <v-list-item-title class="info--text" v-text="child.title"></v-list-item-title>
            </v-list-item-content>
        </v-list-item>
      </v-list-group>
      </div>
    </v-list>
  </v-navigation-drawer>

脚本：

data: () => ({
drawer: true,
pages: [
    {
      icon: 'mdi-home',
      title: 'Index',
      href: '/main'
    },
    {
      icon: 'mdi-bell',
      items: [
        {
          title: 'submenu1',
          href: '/main/menu1/submenu1'
        },
        {
          title: 'submenu2',
          href: '/main/menu1/submenu2'
        }
      ],
      title: 'menu1'
    },
    {
      icon: 'mdi-cog-outline',
      items: [
        {
          title: 'submenu3',
          href: '/main/menu2/submenu3'
        }
      ],
      title: 'menu2'
    },
    {
      icon: 'mdi-text-box-outline',
      items: [
        {
          title: 'submenu4',
          href: '/main/menu3/submenu4'
        }
      ],
      title: 'menu3'
    }
  ]  })

谢谢！

Answer 1

我发现了问题所在。我误解了使用 Vue 的路由概念。

索引项路由到 /main (/main/index)，其他页面在其路由中包含 'main'，如下所示：/main/submenu1。 Vue 理解 /main/submenu1 好像它在 main 之上，所以 /main 也是“活跃的”，因为它在路由中包含相同的名称。

我通过将 /main 路由更改为 /main/home 来解决这个问题。通过强制路由路径与其他路径不同。我尝试使用 /main/index 因为 Vue 一直指向索引但它没有用。我只需要更改页面名称和路由路径。

选择 v-list-group 项时从 v-list-item 中删除活动 class

Remove active class from v-list-item when v-list-group item is selected

vue.js

vue-component

vuetify.js