首页 文章

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

提问于
浏览 次
0

我试图用路由器安装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>
javascript vue.js vuejs2

1 回答

  • 1

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

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

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

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

    回复于

相关问题