Javascript Vue路由器：打开子节点时隐藏父模板

我试图用路由器安装Vue.js，我遇到了一些视图问题。我有一个带有子路由的

router.js

。我想对简单的面包屑使用这种方法，并生成一个清晰的概览，以便知道哪条路线属于哪条路线

打开每一条路线都很有魅力，一切都会展现出来。当我打开

/apps

时，我从我的

apps.vue

中可以看到一个很好的视图，其中显示

应用程序概述

。但是现在我打开了

/apps/app one

，然后我看到了

apps.vue

和

AppOne.vue

模板。如何防止显示这两个模板

vue组件如下所示：

路由器.js Apps.vue

应用程序概述
导出默认值{
名称：“应用程序页面”
}

App1.vue

应用程序1
导出默认值{
名称：'app_one'
}

App2.vue

应用程序2
导出默认值{
名称：“应用程序二”
}

将路由设置为父子关系意味着子组件将在父组件内部呈现（在

处）。这是预期的行为

如果不希望在子管线处于活动状态时父元件可见，则管线应为同级，而不是嵌套：

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

---

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

这也是可能的，而且非常简单。您可以通过以下方式实现：

<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>

父组件内容将显示在此处
导出默认值{
数据（）{
返回{
是的，
}
},
更新的（）{
this.isExactActive=this的类型。$refs.rv==“未定义”；
},
安装的（）{
this.isExactActive=this的类型。$refs.rv==“未定义”；
}
}

---

希望，这会有帮助。

如果是这样的话，那就没关系了，父组件应该出现在子组件中。如果您不想将其作为另一个路由。难道不可能阻止父路由位于子路由中吗？从父路由中删除

，并独立创建路由。我认为，在父路由中包含

也没有用。是的，

只需要渲染子路由组件，如果没有，则不需要。

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

</template>

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

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

</template>

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

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

<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>