时间戳

首页 > 解决方案 > Vue路由器：当孩子打开时隐藏父模板

javascript - Vue路由器：当孩子打开时隐藏父模板

问题描述

我尝试使用路由器安装 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>

App2.vue

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

</template>

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

标签： javascriptvue.jsvuejs2

解决方案

让您的路由处于父子关系意味着子组件将在父组件内呈现（在<router-view>）。这是预期的行为。

如果您不希望父组件在子路由处于活动状态时可见，那么路由应该是兄弟，而不是嵌套：

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

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

推荐阅读