element 中NavMenu 导航菜单 的使用

<div class="menu_content">
      <el-menu :default-active="active" :unique-opened="true">
        <template v-for="item in menuData">
          <!-- 存在子菜单 -->
          <el-submenu
            v-if="item.children"
            :key="item.index"
            :index="item.index"
          >
            <template slot="title">
              <img class="menuIcon" :src="item.icon" />{{ item.name }}
            </template>
            <el-menu-item
              v-for="(cItem, index) in item.children"
              :key="index"
              :index="cItem.index"
              @click="toPage(cItem.index, cItem.name)"
              >&nbsp;&nbsp;{{ cItem.name }}
            </el-menu-item>
          </el-submenu>
          <!-- 不存在子菜单 -->
          <el-menu-item
            :key="item.index"
            :index="item.index"
            v-if="!item.children"
            @click="toPage(item.index, item.name)"
          >
            <img class="menuIcon" :src="item.icon" />
            {{ item.name }}
          </el-menu-item>
        </template>
      </el-menu>
    </div>




      menuData: [
        {
          index: "homePage",
          name: "地图首页",
          flag: true,
          icon: require("@/assets/menu/icon_homePage.png"),
        },
        {
          index: "device",
          name: "数据监控",
          flag: true,

          icon: require("@/assets/menu/icon_device.png"),
        },

        {
          index: "report",
          name: "报表中心",
          flag: true,
          icon: require("@/assets/menu/icon_monitor.png"),
        },
        {
          index: "dataQuery",
          name: "数据分析",
          flag: true,

          icon: require("@/assets/menu/icon_data.png"),
        },
        {
          index: "warn",
          name: "告警管理",
          flag: true,

          icon: require("@/assets/menu/icon_warn.png"),
          children: [
            { index: "warnRecord", name: "告警记录" },
            { index: "warnSetting", name: "告警配置" },
          ],
        },
        {
          index: "workordermanagement",
          name: "工单管理",
          flag: true,
          icon: require("@/assets/menu/workorder.png"),
        },
        {
          index: "linkageservice",
          name: "联动服务",
          flag: true,
          icon: require("@/assets/menu/linkageservice.png"),
        },
        {
          index: "operationplatform",
          name: "远程运维",
          flag: true,
          icon: require("@/assets/menu/icon_policing.png"),
        },
        {
          index: "base",
          name: "知识库",
          flag: true,

          icon: require("@/assets/menu/icon_system.png"),
        },
        {
          index: "platformconfiguration",
          name: "平台配置",
          flag: true,
          icon: require("@/assets/menu/icon_userInfo.png"),
          children: [
            { index: "deviceInfo", name: "测点管理" },
            { index: "userInfo", name: "用户管理" },
          ],
        },

        // {
        //   index: "deviceInfo",
        //   name: "测点管理",
        //   flag: true,

        //   icon: require("@/assets/menu/icon_deviceInfo.png"),
        // },
        // {
        //   index: "userInfo",
        //   name: "用户管理",
        //   flag: true,
        //   icon: require("@/assets/menu/icon_userInfo.png"),
        // },
      ],

注意的几个细节：

存在子菜单的使用外面使用一层submenu

不存在子菜单的直接使用<el-menu-item></el-menu-item>

:default-active="active" 这个属性是刷新浏览器进来的时候进入的menu的菜单，与el-menu-item的 :key 相关，注意不会与el-submenu的 :key相关，