v-list-group中的路由器无法正确路由

时间:2020-07-22 16:16:50

标签: vue.js vuetify.js

我有一个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',
                }
            ]

0 个答案:

没有答案