Vue Router：当孩子打开时隐藏父模板

Question

我正在尝试使用路由器安装 Vue.js，但遇到了一些视图问题。我有一个router.js带孩子的路线。我想将此方法用于简单的面包屑并生成清晰的概览，以便我知道哪条路线属于哪里。

打开每条路线就像一个魅力，一切都会出现。当我打开时，/apps我从我的Apps.vue显示中获得了一个很好的视图App overview</h1>。但现在我打开/apps/app-one，然后我看到Apps.vue和AppOne.vue模板。如何防止显示两个模板？

vue 组件如下所示：

路由器.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,
                },
            ]
        },
    ]
});

应用程序.vue

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

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

应用1.vue

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

</template>

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

应用程序2.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,
    },
]

路由的结构反映了它们在页面上的呈现方式。