哇！这比我最初预期的要困难得多。我通过直接查看source code for the Vuetify docs website解决了这个问题，特别是main nav drawer component，base-group component，base-subgroup component和base-item component。为了便于组合和维护，这些组件被分离到单独的文件中，但我在下面的模板中重新组合了它们：

<template>
  <v-navigation-drawer permanent>
    <v-toolbar color="indigo" dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>  
      <v-toolbar-title>Main Menu</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-dots-vertical</v-icon>
      </v-btn>
    </v-toolbar>
    <v-list
      dense
      expand
      nav
    >
      <!-- ENTIRE list is wrapped in a template -->
      <template v-for="item in $router.options.routes">
        <!-- use v-if to determine if 2nd level nesting is needed -->
        <!-- if it's a menu item with no children -->
        <v-list-item
          v-if="!item.children"
          color="indigo"
          :key="item.name`"
          :to="item.path"
        >
          <v-list-item-icon>
            <v-icon>{{ `mdi-${item.meta.icon}` }}</v-icon>
          </v-list-item-icon>
          <v-list-item-title>{{ item.name }}</v-list-item-title>
        </v-list-item>
        <!-- else if it has children -->
        <v-list-group
          v-else
          :group="item.path"
          color="indigo"
        >
          <!-- this template is for the title of top-level items with children -->
          <template #activator>
            <v-list-item-content>
              <v-list-item-title>
                <v-icon>{{ `mdi-${item.meta.icon}` }}</v-icon>
                {{ item.name }}
              </v-list-item-title>
            </v-list-item-content>
          </template>
          <!-- this template is for the children/sub-items (2nd level) -->
          <template v-for="subItem in item.children">
            <!-- another v-if to determine if there's a 3rd level -->
            <!-- if there is NOT a 3rd level -->
            <v-list-item
              v-if="!subItem.children"
              class="ml-5"
              :key="subItem.name"
              :to="item.path + subItem.path"
            >
              <v-list-item-icon class="mr-4">
                <v-icon v-text="`mdi-${subItem.meta.icon}`" />
              </v-list-item-icon>
              <v-list-item-title class="ml-0">
                {{ subItem.name }}
              </v-list-item-title>
            </v-list-item>
            <!-- if there is a 3rd level -->
            <v-list-group
              v-else
              color="indigo"
              :group="subItem.path"
              sub-group
            >
              <template #activator>
                <v-list-item-content>
                  <v-list-item-title>
                    <v-icon>{{ `mdi-${subItem.meta.icon}` }}</v-icon>
                    {{ subItem.name }}
                  </v-list-item-title>
                </v-list-item-content>
              </template>
              <template v-for="(subSubItem, k) in subItem.children">
                <v-list-item
                  :key="`subheader-${k}`"
                  color="indigo"
                  :value="true"
                  :to="item.path + subItem.path + subSubItem.path"
                >
                  <v-list-item-title>{{ subSubItem.name }}</v-list-item-title>
                  <v-list-item-icon>
                    <v-icon>{{ `mdi-${subSubItem.meta.icon}` }}</v-icon>
                  </v-list-item-icon>
                </v-list-item>
              </template>
            </v-list-group>
          </template>
        </v-list-group>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

你可能已经注意到了，菜单是从Vue Router中的路由列表中生成的。路由器定义如下所示（注意：因为这只是一个例子，我没有将组件与每条路由关联，但实际上，这是必要）：

const router = new VueRouter({
  routes: [
    {
      name: 'No Children (1 level)',
      path: '/no-children',
      meta: {
        icon: 'baby-carriage-off',
      },
    },
    {
      name: 'Attractions (2 levels)',
      path: '/attractions',
      meta: {
        icon: 'airballoon',
      },
      children: [
        {
          name: 'Carnivals',
          path: '/carnivals',
          meta: {
            icon: 'drama-masks',
          },
        },
        {
          name: 'Museums',
          path: '/museums',
          meta: {
            icon: 'bank',
          },
        },
      ]
    },
    {
      name: 'Restaurants (3 levels)',
      path: '/restaurants',
      meta: {
        icon: 'silverware-fork-knife',
      },
      children: [
        {
          name: 'Japanese',
          path: '/japanese',
          meta: {
            icon: 'map-marker-radius-outline',
          },
          children: [
            {
              name: 'Hikari Sushi',
              path: '/hikari-sushi',
              meta: {
                icon: 'food-croissant',
              },
            },
            {
              name: 'Late Night Ramen',
              path: '/late-night-ramen',
              meta: {
                icon: 'noodles',
              },
            },
          ]
        },
        {
          name: 'Italian',
          path: '/italian',
          meta: {
            icon: 'map',
          },
          children: [
            {
              name: 'Jersey Pizza',
              path: '/jersey-pizza',
              meta: {
                icon: 'pizza',
              },
            },
            {
              name: 'Im-pasta-ble',
              path: '/im-pasta-ble',
              meta: {
                icon: 'pasta',
              },
            },
          ]
        },
        {
          name: 'Mexican',
          path: '/mexican',
          meta: {
            icon: 'map-marker',
          },
          children: [
            {
              name: 'Taco Gato',
              path: '/taco-gato',
              meta: {
                icon: 'taco',
              },
            },
            {
              name: 'A-maize-ing',
              path: '/a-maize-ing',
              meta: {
                icon: 'corn',
              },
            },
          ]
        },
      ]
    },
  ]
})

Here's a full, working example on codepen。我将其配置为具有/restaurants/japanese/late-night-ramen的起始路由，当您单击任何端点时，应用程序将被路由到的路径将记录在控制台中。希望这对您有帮助！

另一种方法是使用“to”作为路由，此键将自动检测当前路由。

<v-list v-model:opened="open">
      <template v-for="(menu, j) in mainMenu">
        <v-list-group :value="menu.title" >
          <template v-slot:activator="{ props }">
            <v-list-item
              v-bind="props"
              :key="menu.title + j"
              :value="menu.title + j"
            >
              <v-icon>{{ menu.icon }}</v-icon>
              {{ $t(menu.title) }}
            </v-list-item>
          </template>

          <v-list-item
            dense
            v-for="(item, i) in menu.subMenu"
            :key="item.title + j + i"
            :value="item.title + j + i"
            :title="item.title"
            :to="item.path"
          >
          </v-list-item>
        </v-list-group>
      </template>
    </v-list>