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

Ying
  • 73
我的目录结构是这样的..
  • 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'),
        }
    ]
},
评论
阅读 736
2 个回答

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}}
}

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

clipboard.png

clipboard.png

clipboard.png

clipboard.png

clipboard.png

宣传栏