1.组件需要先写在<el-menu></el-menu>里面

2.一点此单就能显示东西或进入路由的就用

<el-menu-item></el-menu-item>实现

3.点了展开下一级菜单的要写在

<el-submenu>

<template slot=‘title’>标题文本</template>

<el-menu-item></el-menu-item>

</el-submenu>

当el-menu设置router属性时，需要在el-menu-item和el-sunmenu里面写index

index的值必须是字符串，所以在

<el-submenu :index="index.toString()">这一句，需要把它转化成字符串

常用是属性

 background-color：设置导航菜单的背景颜色（默认值：#ffffff），可以取值为transparent（透明）。

    text-color：设置导航菜单的文本颜色。

    mode：设置导航菜单的摆放方式，默认值：vertical（垂直的），还可以取值为horizontal（水平的）。

    router：设置是否开启路由模式，若开启该模式，则<el-menu-item>的index属性需要指定路由地址。

    default-active：设置默认被激活的路由。

    collapse-transition：设置子菜单是否具备折叠动画。

    active-text-color：设置当前激活菜单项的文本颜色。

    unique-opened：设置是否只允许有一个子菜单处于展开状态。

有关导航菜单的CSS样式类：

    （1）去掉垂直导航菜单右侧默认的竖线：若是水平方式放置的导航栏菜单是下方默认的横线。

         .el-menu{ border-right:none; }

    （2）鼠标经过菜单项：

         .el-menu-item:hover

    （3）鼠标经过子菜单的标题文本：

         >>.el-submenu__title:hover（这里是两个下划线）

    （4）当前被激活菜单项：

         .el-menu-item.is-active

    （5）子菜单中的菜单项：

         .el-submenu .el-menu-item

4.如果动态生成菜单项

<template>
  <div class="myMenu">
    <el-menu
        background-color="transparent"
        text-color="#ffffff"
        router
        active-text-color="#ffffff"
    >
      <template v-for="(item,index) in menuData">
        <template v-if="item.children">
          <el-submenu :index="index.toString()">
              <template slot="title"><i :class="item.icon"></i>{{item.permissionName}}</template>
            <template v-for="(child,index2) in item.children">
                <el-menu-item :index="`/successPage/${child.path}`">{{child.permissionName}}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="`/successPage/${item.path}`"><i :class="item.icon"></i>{{item.permissionName}}</el-menu-item>
        </template>
      </template>

    </el-menu>
  </div>
</template>

<script>
/*
mapState里面的内容
export default {
    userInfo:{}
}
multations里面的内容
export default {
    setUserInfo(state,payload){
        state.userInfo=payload
        state.userInfo.expiresTime=new Date().getTime()+payload.expires*1000
    }
}
* */
import {mapState} from 'vuex'
export default {
  name: "myMenu",
  data(){
    return{
      menuData:[]
    }
  },
  computed:{
    ...mapState(['userInfo'])
  },
  mounted(){
    let url='/api/getRouter.jsp';
    let data={
      params:{
        permissionIds:this.userInfo.permission
      }
    }
    this.$axios.get(url,data).then(res=>{
      if (res.data.code===200){
        this.menuData=res.data.data
      }
    })
  }
}
</script>

<style scoped>
.el-menu{
  border-right:none
}
>>>.el-submenu__title{
  color:#ffffff;
}
.el-menu-item.is-active,
>>>.el-submenu__title:hover,
.el-menu-item:hover{
  background-color: #197199 !important;
}
.el-submenu .el-menu-item{
  text-indent: 20px;
}
</style>

userInfo的数据