VUE多级菜单渲染后会多出一个菜单

Question

VUE多级菜单渲染后会多出一个菜单

目录代码

<aside :class="collapsed?'menu-collapsed':'menu-expanded'" id="asides">

          <el-menu :default-active="$route.path" id="menuClass" class="navigation" unique-opened router
                   v-show="!collapsed">
            <template v-for="(item,index) in getAllRoutes" v-if="!item.hidden">
              <!--第一层-->
              <el-submenu :index="index+''" :key="index+''" v-if="!item.leaf"   >
                <!--第一层目录名称-->
                <template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>

                <!--第二层-->
                <el-submenu v-for="(child,index2) in item.children" :index="child.id+''" :key="child.id"
                            v-if="!child.hidden&&!child.leaf" :popper-append-to-body="true" :filterable="false">
                  <!--第二层目录名称-->
                  <template slot="title"><i :class="child.iconCls"></i>{{child.name}}</template>

                  

                  <!--第二层子页面跳转页面-->
                  <el-menu-item v-for="item2 in child.children" :index="item2.path" :key="item2.path"
                                v-if="!item2.hidden&&item2.leaf">
                    {{item2.name}}
                  </el-menu-item>

                  <!--第二层结束-->
                </el-submenu>
                <!--第一层子页面跳转页面-->
                <el-menu-item v-for="child in item.children" :index="child.path" :key="child.path"
                              v-if="!child.hidden&&child.leaf">
                  {{child.name}}
                </el-menu-item>
                <!--第一次结束-->
              </el-submenu>
            </template>

          </el-menu>
          <!--导航菜单-->

        </aside>

Answer 1

我是不是router的事儿呢 你chrome下个vue devtools 看看结构