vue 组件切换的时候,第一次点击可以加载出来,在同级之间点击就会空白

Question

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

• 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'),
        }
    ]
},

Answer 1

emmm很不理解这样的结构 第三级的路由完全可以写成组件的形式啊
至于你这里出现的问题，我猜测是路由懒加载的原因，
你可以尝试将A和E文件夹下的子路由直接import引用而不是按需引入

 <template>
 <component :is='stepControl[step]'
            :contactInfo="contactInfo"></component>
</template>
<script>
const a =()=>import('../components/step/a');
const b =()=>import('../components/step/b');
const c =()=>import('../components/step/c');
const stepControl=['a','b','c']组件名
export default{
data(){return {step:1}}
}

Answer 2

感觉是你路径都使用绝对路径的原因，跳转的时候尝试用路由的name跳转试试