Vue router-view не показывает детей - PullRequest
Новая
       18

Vue router-view не показывает детей

0 голосов
/ 13 июня 2019

У меня есть 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>

Моя проблема в том, что меню отображается правильно, нощелкнув дочерний элемент, отображаемый компонент является его родительским компонентом .

Что я делаю не так?

1 Ответ

2 голосов
/ 13 июня 2019

Это нормальное поведение vue-router: если вы хотите, чтобы вложенный маршрут отображался, вам нужно добавить <router-view /> внутри AboutComponent.

Пример здесь: https://jsfiddle.net/yyx990803/L7hscd8h/

Пользовательский компонент содержит <router-view />

...