vue2功能菜单权限

1.后台提供菜单数据，前端利用element-ui得menu组件渲染

1.1封装菜单组件

//MenuTree.vue

 <template v-for="(items, index) in tree">
      <el-submenu v-if="items.children.length > 0 && items.children" :index="items.value" :key="items.value"> <!--一级菜单是否含有子菜单-->
        <template slot="title">
          <img :src="require(`../assets/${items.value}.png`)" alt="" v-if="items.icon" class="itemimg" /> <!--菜单图标-->
          <span class="itemtitle">{{ items.label }}</span>
        </template>
        <menu-tree :tree="items.children"></menu-tree><!--子菜单-->
      </el-submenu>
<!--只有一级菜单-->
      <el-menu-item v-else :index="items.value" :key="items.value">
        <img :src="require(`../assets/${items.value}.png`)" alt="" v-if="items.icon" class="itemimg" />
        <span slot="title" class="itemtitle">{{ items.label }}</span>
      </el-menu-item>
    </template>


//js
export default {
  name: "MenuTree",
  props: {
    tree: [],
  },
};

1.2循环菜单组件渲染

//nav组件
 <el-menu active-text-color="#fff" @open="handleOpen" router :unique-opened="false" :collapse-transition="false"
            :collapse="isCollapse" mode="vertical" @close="handleClose" class="menus" :default-active="activeMenu">
            <menu-tree :tree='menuChange'></menu-tree>
        </el-menu>

//menuChange：获取菜单数据方法
//菜单数据结构如下
                    {
                        "label": "菜单名称一",
                        "value": "diviconfirm",
                        "id": "diviconfirm",
                        "icon": "",
                        "children": [
                                 {
                        "label": "菜单名称二",
                        "value": "diviconfirm2",
                        "id": "diviconfirm2",
                        "icon": "",
                        "children": []
                                   },
                         ]
                    },

label：菜单名称

children：子菜单

ico：菜单图标

value：可作为判断路由是否合法，权限设置。