问题

这个是渲染到4级的导航菜单，只截取一部分展示。重点不是这个问题，是刚开始点击一个子菜单，其他同级的子菜单也会相应的展开和折叠，那么这种情况为什么会这样呢，明明自己的:index=“”有设置内容了，怎么还会这样呢。

原来的是这样的，我的理解是，如果都把它设置为url，index无法判断，所以每次都同时展开或折叠。

下面是改了之后的，使用后端给的接口中，改为用来区分层级或者是编码的那个字段，这样就可以有区别的情况下，index能正确区分，并且解决这个问题。

代码如下：

<!--      侧边栏区域-->
      <el-aside width="250px" class="aside">
        <el-menu
          :default-active="this.$route.path"
          class="el-menu-demo highActive"
          mode="vertical"
          @select="handleSelect"
          background-color="#1E8B38"
          style="border-top: none"
          text-color="#ffffff"
          active-text-color="#ffffff"
          router
        >
          <!-- 第一层 -->
          <template v-for="(item,index) in menuData[active].childMenu">
            <!-- 如果第一层有子菜单，则继续循环 -->
            <template v-if="item.childMenu">
              <el-submenu :index="item.sysMenuCode" :key="item.sysMenuVueUrl">
                <template slot="title">
                  <span slot="title">{{ item.sysMenuName }}</span>
                </template>
                <!-- 第二层 -->
                <template v-for="subItem in item.childMenu">
                  <!-- 如果第二层有子菜单，则继续循环 -->
                  <template v-if="subItem.childMenu">
                    <el-submenu :index="subItem.sysMenuCode" :key="subItem.sysMenuVueUrl">
                      <template slot="title">
                        <span slot="title">{{ subItem.sysMenuName }}</span>
                      </template>
             <!--  ------------------------------------------------------------------ -->
                  <!-- 如果第二层没有子菜单 -->
                  <el-menu-item
                    v-else
                    :index="subItem.sysMenuCode"
                    :key="subItem.sysMenuVueUrl"
                  >{{ subItem.sysMenuName }}</el-menu-item
                  >
                </template>
              </el-submenu>
            </template>
            <!-- 如果第一层没有子菜单 -->
            <template v-else>
              <el-menu-item :index="item.sysMenuCode" :key="item.sysMenuVueUrl">
                <span slot="title">{{ item.sysMenuName }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-aside>

更新一下，该方法虽然可以解决到这个问题，但是又出现新的问题就，那就是路径地址变成了编码，无法跳转，页面为空，待解决……