el-menu结合动态渲染实现aside侧边栏

//el-menu定义菜单选项
//open ：sub-menu 展开的回调
//close ：sub-menu 收起的回调
//router 该模式会在激活导航时以 index 作为 path 进行路由跳转
//select 菜单激活回调
<el-menu  
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
        @select="select"
      >
      /*
      aside  侧边栏的json数据
		*/
        <div v-for="(item, index) in aside" :key="index" >
        //注意，这里的index需要是字符串不然会报错
         //判断有没有子项有就展开子菜单没有就算一个菜单项
          <el-submenu v-if="item.children" :index="item.id + ''">
            //title是具名插槽
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            
            <div v-if="item.children">
              <el-menu-item-group
                v-for="(cItem, cIndex) in item.children"
                :key="cIndex + 'copy'"
              >
                <el-menu-item :index="cItem.path">
                  <i :class="item.icon"></i>{{ cItem.title }}</el-menu-item
                >
              </el-menu-item-group>
            </div>
          </el-submenu>
           <el-menu-item v-else :index="item.path">
                  <i :class="item.icon"></i>{{ item.title }}</el-menu-item
           >
        </div>
        <!-- 把侧边栏放到asidejson文件中，然后遍历取出来 -->
      </el-menu>

效果图：