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,
    },
]

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

Answer 2

这也是可能并且非常容易的。您可以通过以下方法来实现：

<template>

    <div>

        <div v-show="isExactActive">
            Parent component contents will be here
        </div>

        <router-view ref="rv"></router-view>

    </div>

</template>


<script>

    export default {

        data() {
            return {
                isExactActive: true,
            }
        },

        updated() {
            this.isExactActive = typeof this.$refs.rv === 'undefined';
        },

        mounted() {
            this.isExactActive = typeof this.$refs.rv === 'undefined';
        }

    }
</script>

希望，这会有所帮助。