Vue Router: 자녀가 열려 있을 때 부모 템플릿

Vue Router: 자녀가 열려 있을 때 부모 템플릿

라우터에 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>

루트가 부모-자녀 관계에 있다는 것은 자녀 컴포넌트가 부모 컴포넌트 내에 렌더링된다는 것을 의미합니다.<router-view>) 이것은 예상되는 동작입니다.

자녀 루트가 활성화 되어 있을 때 부모 컴포넌트가 표시되지 않도록 하려면 루트는 네스트가 아닌 형제여야 합니다.

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

호프, 이게 도움이 될 거야.

언급URL : https://stackoverflow.com/questions/52234356/vue-router-hide-parent-template-when-child-is-open