common/layout/home/menuInfo.vue

<template>
  <div id="menuInfo">
    <el-row>
      <el-col :span="24" class="menu">
        <el-menu
          :default-active="thisRouter()"
          class="el-menu-demo"
          mode="horizontal"
          :router="false"
          :default-openeds="defalutMenu"
          @select="to"
          text-color="#fff"
        >
          <el-menu-item index="/">网站首页</el-menu-item>
          <el-menu-item index="/government/government">科技政务</el-menu-item>
          <el-menu-item index="/policy/policy">科技政策</el-menu-item>
          <el-menu-item index="/supermaket/supermarket">科技超市</el-menu-item>
          <el-menu-item index="/shuju/shuju">科技数据</el-menu-item>
          <el-menu-item index="/service/service">科技服务</el-menu-item>
          <el-menu-item index="/">
            <el-link
              style="padding: 0px 0px;font-size: 22px;"
              :underline="false"
              href="http://139.210.167.203/free-technological-management/mapApply/getMap"
              target="_blank"
              >科技资源</el-link
            >
          </el-menu-item>
          <el-menu-item index="/personnel/personnel">科技人才</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'menuInfo',
  props: {},
  components: {},
  data: () => ({
    defalutMenu: [],
  }),
  created() {},
  computed: {},
  methods: {
    thisRouter() {
      console.log(this.$route.path);
    },
    to(index) {
      this.$router.push({ path: index });
    },
  },
};
</script>

<style lang="less" scoped>
.menu {
  height: 70px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
}
/deep/.el-menu {
  background-color: rgba(0, 0, 0, 0.4);
}
/deep/.el-menu--horizontal > .el-menu-item {
  height: 70px;
  line-height: 70px;
  border-right: 1px solid #ccc;
  padding: 0 30px;
  font-size: 22px;
}
/deep/.el-menu--horizontal > .el-menu-item:last-child {
  padding: 0 34px 0 33px;
}
/deep/.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
  color: #fff;
  background-color: #215299;
}
/deep/.el-menu--horizontal > .el-menu-item:hover {
  background-color: #215299;
}
</style>