我的目录结构是这样的..

• views

  • home.vue

    • systerm 文件夹

      • systerm.vue <router-view />

      • A 文件夹

        • A.vue <router-view />

        • A1文件夹

          • page1.vue

        • A2文件夹

          • page2.vue

      • B 文件夹

        • page3.vue

      • C 文件夹

        • page4.vue

      • D 文件夹

        • page5.vue

      • E 文件夹

        • page6.vue <router-view />

        • E1 文件夹

          • page7.vue

        • E2 文件夹

          • page8.vue
• app.vue <router-view />

问题是:
page1, page2会渲染在A.vue上,当第一次点击进入的时候,是可以显示组件的,但是page1, page2之间切换就会空白加载不出来.E文件夹同理.如果从其他比如page3再次切入page1, page2的时候,可以显示组件.
但是page3, page4, page5, page6等其他页面同级切换不会出现这样的情况..只有再次嵌套的组件才会出现这样的问题..
目录结构必须这样, Router也是这样写的..不可更改

请问各位大神,这是什么问题呀~~

home.vue
<template>
  <div id="home">
      <a-layout>
          <a-layout-sider class="sider" width="256px">
              <side-bar />
          </a-layout-sider>
          <a-layout>
                <a-layout-header class="layoutHeader">
                    <headerNav />
                </a-layout-header>
                <a-layout-content class="layoutContent">
                    <multi-tab></multi-tab>
                    <transition name="page-transition">
                        <router-view />
                    </transition>
                </a-layout-content>
          </a-layout>
      </a-layout>
  </div>
</template>

systerm.vue
<template>
    <div>
        <layout ref="layout"/>
        <div class="each-content" :style="{minHeight: height + 'px'}"><router-view /></div>
    </div>
</template>

A.vue
<template>
    <div>
        <router-view></router-view>
    </div>
</template>

E.vue
<template>
    <div>
        <router-view />
    </div>
</template>

部分路由
{
    path: '/systerm/agent',
    name: 'agent',
    component: () => import('views/systerm/agent'),
    children: [
        {
            path: '/systerm/agent/agential',
            name: 'agential',
            component: () =>import('views/systerm/agent/agential'),
        },
        {
            path: '/systerm/agent/agent-user',
            name: 'agent-user',
            component: () =>import('views/systerm/agent/user'),
        }
    ]
},
{
    path: '/systerm/community',
    name: 'community',
    component: () => import('views/systerm/community'),
    children: [
        {
            path: '/systerm/community/manange',
            name: 'community-manange',
            component: () => import('views/systerm/community/manange'),
        },
        {
            path: '/systerm/community/user',
            name: 'community-user',
            component: () => import('views/systerm/community/user'),
        }
    ]
},