vue-cli路由子级没有渲染效果?

问题描述

RT,二级设置渲染会把子级都变成那个组件,三级不管设置什么组件一直都是渲染HelloWorld组件,是我哪里配置错了吗?

相关代码

模板

<el-menu :default-active="activeMenuIndex" class="el-menu-vertical-demo"
background-color="#22205f" text-color="#fff" active-text-color="#ff9c02"
router>
    <el-menu-item v-for="item1 in menuData" :key="item1.path" :index="item1.path"
    v-if="item1.children==undefined">
        <i :class="item1.icon">
        </i>
        <span>
            {{item1.name}}
        </span>
    </el-menu-item>
    <el-submenu v-for="item2 in menuData" :key="item2.path" :index="item2.path"
    v-if="item2.children!=undefined">
        <template slot="title">
            <i :class="item2.icon">
            </i>
            <span>
                {{item2.name}}
            </span>
        </template>
        <el-menu-item v-for="item3 in item2.children" :key="item3.path" :index="item3.path"
        v-if="item3.children==undefined">
            {{item3.name}}
        </el-menu-item>
        <el-submenu v-for="item4 in item2.children" :key="item4.path" :index="item4.path"
        v-if="item4.children!=undefined">
            <template slot="title">
                {{item4.name}}
            </template>
            <el-menu-item v-for="item5 in item4.children" :key="item5.path" :index="item5.path">
                {{item5.name}}
            </el-menu-item>
        </el-submenu>
    </el-submenu>
</el-menu>

路由:

{
      path: '/nhsj',
      name: '能耗数据',
      icon: 'fas fa-burn',
      component: HelloWorld,
      children: [{
        path: '/nhsj/nhgs',
        name: '能耗公示',
        component: HelloWorld,
      }, {
        path: '/nhsj/nhsj',
        name: '能耗审计',
        component: HelloWorld,
      }, {
        path: '/nhsj/nhfx',
        name: '能耗分析',
        component: HelloWorld,
        children: [{
          path: '/nhsj/nhfx/nnytj',
          name: '年能源统计',
          component: a1,
        }, {
          path: '/nhsj/nhfx/ynytj',
          name: '月能源统计',
          component: HelloWorld,
        }, {
          path: '/nhsj/nhfx/nydb',
          name: '能源对比',
          component: HelloWorld,
        }, {
          path: '/nhsj/nhfx/fgzsjnydb',
          name: '非工作时间能源对比',
          component: HelloWorld,
        }, {
          path: '/nhsj/nhfx/nyfl',
          name: '能源分类',
          component: HelloWorld,
        }]
      }, {
        path: '/nhsj/nhkh',
        name: '能耗考核',
        component: HelloWorld,
      }]
    }

你期待的结果是什么?实际看到的错误信息又是什么?

根据我的路由渲染指定组件。。。现在三级只渲染helloword,二级只渲染一级菜单的组件。

阅读 1.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题