Question

我有一个具有两个级别的VueRouter：

const router = new VueRouter({
routes: [
    {
        path: '/',
        name: 'Home',
        component: HomeComponent
    },
    {
        path: '/about',
        name: 'About',
        component: AboutComponent
            children: [
                {
                    path: 'plans',
                    name: 'Plans',
                    component: PlansComponent
                },
     },
]

App.vue文件具有以下代码：

<template>
    <div>
        <div>
            <nav>
                <template v-for="route in routes">
                    <div>
                        <router-link class="router-link" :key="route.path" :to="route.path">
                            {{route.name}}
                        </router-link>
                        <div v-for="child in route.children">
                            <router-link class="router-link router-link-child" :key="child.path" :to="{path: route.path + '/' + child.path}">
                                {{child.name}}
                            </router-link>
                        </div>
                    </div>
                </template>
            </nav>
        </div>
        <router-view></router-view>
    </div>
</template>

我的问题是菜单正确呈现，但是单击子项呈现的组件是其父组件。

我在做什么错了？

Answer 1

这是正常的vue-router行为：如果要渲染嵌套的路由，则需要在AboutComponent内添加一个<router-view />。

此处的示例：https://jsfiddle.net/yyx990803/L7hscd8h/

用户组件包含<router-view />

Vue路由器视图未显示子级

1 个答案: