element-UI 侧边栏

element-ui侧边栏

官网地址.
代码：

<el-menu  :default-openeds="['1','3']" 	//默认index为1和3的菜单展开,这里不加冒号好像收缩功能就失效了
          default-active="2" 			//默认选中的菜单
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose">
          <el-submenu index="1">  		//el-submenu:可展开的菜单,index是文本类型，不是数值类型
            <template slot="title">		//对应的菜单名
              <i class="el-icon-location"></i>		//小图标
              <span>导航一</span>		//
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>		//子节点，不可展开
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>

动态构建侧边栏

        <el-menu :default-openeds="['0','1']" :router="$route">
          <!--获取index.js的routes:$router.options.routes  -->
          //获取index.js中routes的信息和index值
          <el-submenu v-for="(item,index) in $router.options.routes"   
                      :key="index"
                      :index="index+''">   //赋值
            <template slot="title">
              <i class="el-icon-message"></i>{
    
    {
    
    item.name}}</template>	
              //获取上面得到的item的子组件信息
            <el-menu-item v-for="(item2, index2) in item.children"
                          :key="index2"
                          :index="item2.path"	//赋值
                          :class="$route.path==item2.path?'is-active':''">{
    
    {
    
    item2.name}}</el-menu-item>  //被点中后的样式
          </el-submenu>

        </el-menu>

具体可看以下：
https://www.jianshu.com/p/79f9f352820b.