我有一个v-list-group
,我希望在单击时将任何带路由的父元素路由到其中,并且希望将任何带有项目的父元素与可点击/路由的子元素一起展开,但是,当我尝试单击时About项目(父元素)不会将我路由到“ / about”,但是子列表中的子元素可以路由。不知道为什么或如何做到这一点。这是v列表
<template>
<v-navigation-drawer
permanent
aria-expanded="true"
>
<template>
<v-card
max-width="500"
class="mx-auto"
>
<v-toolbar
color="teal"
dark
>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Colby Barton</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-list>
<v-list-group
v-for="item in items"
:key="item.title"
router :to="item.route" link
:prepend-icon="item.icon"
:append-icon="item.items ? undefined : ''"
>
<template v-slot:activator>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="subItem in item.items"
:key="subItem.title"
router :to="subItem.route" link
>
<v-list-item-content>
<v-list-item-title v-text="subItem.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
</v-list>
</v-card>
</template>
</v-navigation-drawer>
<v-main>
<router-view/>
</v-main>
</template>
这是项对象
items: [
{
title: 'My Projects',
icon: 'mdi-folder',
route: '',
items: [
{title: 'Java', route: '/java'},
{title: 'C++', route: '/c++'},
]
},
{
title: 'About Me',
icon: 'mdi-star',
route: '/about',
}
]