elementui

<template>
  <el-menu
    :default-active="$route.path"
    mode="horizontal"
    background-color="#2E59D1"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <template v-for="item in menuData">
      <el-menu-item v-if="item.children.length === 0" :key="item.path" :index="item.path">{{ item.name }}</el-menu-item>
      <el-submenu v-else :key="item.path" :index="item.path">
        <template slot="title">{{ item.name }}</template>
        <el-menu-item v-for="subItem in item.children" :key="subItem.path" :index="subItem.path">{{ subItem.name }}</el-menu-item>
      </el-submenu>
    </template>
  </el-menu>
</template>
<script>
export default {
  name: 'TopMenu',
  data() {
    return {
      menuData: [
        {
          name: '系统首页',
          path: '/home',
          children: []
        },
        {
          path: '/comprehensive',
          name: '综合展示',
          children: [
            {
              path: '/status_monitor',
              name: '状态监控'
            },
            {
              path: '/warning_monitor',
              name: '监控预警'
            }
          ]
        },
        {
          path: '/diagnose',
          name: '诊断分析',
          children: []
        },
        {
          path: '/report_view',
          name: '报表查询',
          children: []
        },
        {
          path: '/library',
          name: '知识库管理',
          children: []
        },
        {
          path: '/devOps',
          name: '运维管理',
          children: []
        },
        {
          path: '/admin',
          name: '系统管理',
          children: [
            {
              path: '/company',
              name: '公司管理'
            }
          ]
        }
      ]
    }
  },
  methods: {}
}
</script>

ant-design-vue

<template>
  <a-menu mode="horizontal" theme="dark" :default-selected-keys="[$route.path]" @click="eventMenuClick">
    <template v-for="item in menuData">
      <a-menu-item v-if="item.children.length === 0" :key="item.path">{{ item.name }}</a-menu-item>
      <a-sub-menu v-else :key="item.path" :title="item.name">
        <a-menu-item v-for="subItem in item.children" :key="subItem.path">{{ subItem.name }}</a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
</template>
<script>
export default {
  name: 'TopMenu',
  data() {
    return {
      menuData: [
        {
          name: '系统首页',
          path: '/home',
          children: []
        },
        {
          path: '/comprehensive',
          name: '综合展示',
          children: [
            {
              path: '/company_status_monitor',
              name: '状态监控'
            },
            {
              path: '/warning_monitor',
              name: '监控预警'
            }
          ]
        },
        {
          path: '/diagnose',
          name: '诊断分析',
          children: []
        },
        {
          path: '/report_view',
          name: '报表查询',
          children: []
        },
        {
          path: '/library',
          name: '知识库管理',
          children: []
        },
        {
          path: '/devOps',
          name: '运维管理',
          children: []
        },
        {
          path: '/admin',
          name: '系统管理',
          children: [
            {
              path: '/company',
              name: '公司管理'
            }
          ]
        }
      ]
    }
  },
  methods: {
    eventMenuClick({ item, key, keyPath }) {
      this.$router.push({
        path: key
      })
    }
  }
}
</script>