Vue Router: скрыть родительский шаблон при открытом дочернем

Question

Я пытаюсь установить Vue.js с роутером, и у меня возникают некоторые проблемы с просмотром. У меня есть router.js с дочерними маршрутами. Я хочу использовать этот метод для простых хлебных крошек и создать четкий обзор, чтобы я знал, какой маршрут принадлежит.

Открытие каждого маршрута работает как шарм, все появляется. Когда я открываю /apps, я получаю хороший вид из моего Apps.vue, который отображает App overview</h1>. Но теперь я открываю /apps/app-one, а затем я вижу шаблоны Apps.vue и AppOne.vue. Как я могу предотвратить отображение обоих шаблонов?

Компоненты vue выглядят так:

Router.js

import Router from 'vue-router';
import AppsPage from './components/Apps.vue'
import AppOne from './components/AppOne.vue'
import AppTwo from './components/AppTwo.vue'

export default new Router({
    // mode: 'history',
    routes: [
        {
            path: '/apps',
            component: AppsPage,
            children: [
                {
                    path: '/apps/app-one',
                    component: AppOne,
                },
                {
                    path: '/apps/app-two',
                    component: AppTwo,
                },
            ]
        },
    ]
});

Apps.vue

<template>
    <div id="app-overview">
        <h1>App overview</h1>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app_page'
    }
</script>

App1.vue

<template>
    <div>
        <h1>App 1</h1>
    </div>

</template>

<script>
export default {
    name: 'app_one'
}
</script>

App2.vue

<template>
    <div>
        <h1>App 2</h1>
    </div>

</template>

<script>
export default {
    name: 'app_two'
}
</script>

Answer 1

Наличие ваших маршрутов в родительско-дочерних отношениях означает, что дочерний компонент будет отображаться внутри родительского компонента (в <router-view>). Это ожидаемое поведение.

Если вы не хотите, чтобы родительский компонент был видимым, когда дочерний маршрут активен, тогда маршруты должны быть родными, а не вложенными:

[
    {
        path: '/apps',
        component: AppsPage,
    },
    {
        path: '/apps/app-one',
        component: AppOne,
    },
    {
        path: '/apps/app-two',
        component: AppTwo,
    },
]

Структура маршрутов отражает способ их отображения на странице.