Vue2+Vuetify：如何通过子列表项跳转到对应视图？

使用Vue2搭配Vuetify开发应用，通过<router-view>实现视图导航。已创建包含分组与子分组的导航抽屉，每个子分组对应独立视图（例如子分组Revenues对应AFRrev.vue，Stats对应AFRstats.vue，SFR、CLC等分组同理）。期望点击子分组时跳转到对应视图，但目前无法在<v-list-item>的:to属性中通过父分组名称生成正确路由（曾尝试用this.allGroupItems.text + 'rev'生成AFRrev路由但未生效），且Vue Router中已正确定义所有路由。

视图示例 #

AFRrev.vue #

<template>
    <v-container>
        Some data
    </v-container>
</template>

<script>
export default {

}
</script>

AFRstats.vue #

<template>
    <v-container>
        Some edata
    </v-container>
</template>

<script>
export default {

}
</script>

原Drawer.vue代码 #

<template>
    <v-navigation-drawer app width="215">

    <v-list>

      <v-list-group
        v-for="item in allGroupItems"
        :key="item.id">
          <template v-slot:activator>
            <v-list-item-title >
              {{ item.text }}
            </v-list-item-title>
          </template>

          <v-list-item
            v-for="item in allSubgroupItems"
            :key="item.id"
            :to="item.route"
            link>
            <v-list-item-content>
              <v-list-item-title> {{ item.text }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>          
      </v-list-group>
    </v-list>
    <v-navigation-drawer>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data () {
      return {
        allGroupItems: [
          { id: 1,  text: "AFR"},
          { id: 2,  text: "SFR"},
          { id: 3,  text: "CBR"},
          { id: 4,  text: "CLC"}
        ],
        allSubgroupItems: [
          { id: 1.1,  text: "Revenues", route: this.allGroupItems.text + 'rev' },
          { id: 2.1, text: "Stats", route: this.allGroupItems.text + 'stats'  }
        ],
  }
},
}
</script>

核心问题在于：

1. allSubgroupItems是独立数组，无法关联到当前循环的父分组；
2. 在data初始化阶段，this.allGroupItems是数组，直接访问.text会得到undefined，无法生成有效路由；
3. 循环变量重复使用item，导致变量覆盖引发逻辑错误。

可以通过以下两种方式解决：

方式一：重构数据结构，让父分组包含子分组配置 #

修改allGroupItems，每个父分组内定义对应的子分组后缀，渲染时直接结合父分组的text生成路由：

<template>
    <v-navigation-drawer app width="215">
        <v-list>
            <v-list-group
                v-for="group in allGroupItems"
                :key="group.id">
                <template v-slot:activator>
                    <v-list-item-title>{{ group.text }}</v-list-item-title>
                </template>

                <v-list-item
                    v-for="subgroup in group.subgroups"
                    :key="subgroup.id"
                    <!-- 若路由是路径格式，比如/AFRrev，直接拼接；若是命名路由，改为:to="{ name: `${group.text}${subgroup.routeSuffix}` }" -->
                    :to="`/${group.text}${subgroup.routeSuffix}`"
                    link>
                    <v-list-item-content>
                        <v-list-item-title>{{ subgroup.text }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>          
            </v-list-group>
        </v-list>
    </v-navigation-drawer>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data () {
        return {
            allGroupItems: [
                { 
                    id: 1,  
                    text: "AFR",
                    subgroups: [
                        { id: 1.1, text: "Revenues", routeSuffix: "rev" },
                        { id: 1.2, text: "Stats", routeSuffix: "stats" }
                    ]
                },
                { 
                    id: 2,  
                    text: "SFR",
                    subgroups: [
                        { id: 2.1, text: "Revenues", routeSuffix: "rev" },
                        { id: 2.2, text: "Stats", routeSuffix: "stats" }
                    ]
                },
                { 
                    id: 3,  
                    text: "CBR",
                    subgroups: [
                        { id: 3.1, text: "Revenues", routeSuffix: "rev" },
                        { id: 3.2, text: "Stats", routeSuffix: "stats" }
                    ]
                },
                { 
                    id: 4,  
                    text: "CLC",
                    subgroups: [
                        { id: 4.1, text: "Revenues", routeSuffix: "rev" },
                        { id: 4.2, text: "Stats", routeSuffix: "stats" }
                    ]
                }
            ]
        }
    }
}
</script>

方式二：保留独立子分组数组，渲染时动态结合父分组生成路由 #

如果不想修改数据结构，可在渲染子分组时，使用当前父分组的text拼接路由：

<template>
    <v-navigation-drawer app width="215">
        <v-list>
            <v-list-group
                v-for="group in allGroupItems"
                :key="group.id">
                <template v-slot:activator>
                    <v-list-item-title>{{ group.text }}</v-list-item-title>
                </template>

                <v-list-item
                    v-for="subgroup in allSubgroupItems"
                    :key="subgroup.id"
                    <!-- 按实际路由格式调整拼接规则 -->
                    :to="`/${group.text}${subgroup.routeSuffix}`"
                    link>
                    <v-list-item-content>
                        <v-list-item-title>{{ subgroup.text }}</v-list-item-title>
                    </v-list-item-content>
                </v-list-item>          
            </v-list-group>
        </v-list>
    </v-navigation-drawer>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data () {
        return {
            allGroupItems: [
                { id: 1,  text: "AFR"},
                { id: 2,  text: "SFR"},
                { id: 3,  text: "CBR"},
                { id: 4,  text: "CLC"}
            ],
            allSubgroupItems: [
                { id: 1.1, text: "Revenues", routeSuffix: "rev" },
                { id: 2.1, text: "Stats", routeSuffix: "stats" }
            ]
        }
    }
}
</script>

关键注意点 #

• 确保:to的格式与Vue Router中定义的路由一致：路径路由直接拼接字符串，命名路由使用对象格式{ name: '路由名称' }；
• 循环变量必须区分父分组和子分组（比如group和subgroup），避免变量覆盖。

内容的提问来源于stack exchange，提问作者mustafa00