jin_ji_hu/src/layout/components/FixedHeader/components/MenuMain/index.vue

<template>
  <div class="men-main">
    <div
      v-for="(item, index) in topMenus"
      :key="index"
      :class="isCurrentRoute(item.fullPath) ? 'activeMenu' : ''"
    >
      <div
        class="menu-item"
        v-if="!item.children"
        @click="handlerRouter(item.fullPath)"
      >
        {{ item.meta.title }}
      </div>
      <el-dropdown trigger="hover" v-else>
        <div class="menu-item">
          {{ item.meta.title }}
        </div>

        <el-dropdown-menu slot="dropdown">
          <menu-item :item="item"></menu-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import MenuItem from "../MenuItem";
import { mapGetters } from "vuex";
// 隐藏侧边栏路由
export default {
  data() {
    return {
      topMenus: [],
      // 判断登陆用户是何身份⌈ 01 ： 企业  02 ： 政务 ⌋
      userType: this.$store.state.user.userType,
    };
  },

  components: {
    MenuItem,
  },
  mounted() {
    this.filterRouter();
  },
  methods: {
    filterRouter() {
      this.sidebarRouters.forEach((item) => {
        if (item.hidden !== true && item.redirect != "index") {
          if (item.path === "/") {
            this.topMenus.push(item.children[0]);
          } else {
            this.topMenus.push(item);
          }
        }
      });
      if(this.userType == "01") {
        this.topMenus[0].meta.title = "首页"
      }
      this.addParentId(this.topMenus, null);
      this.$store.commit("SET_FIRST_ROUTER", this.topMenus[0].fullPath);
    },
    addParentId(tree, parentPath) {
      tree.forEach((node) => {
        let merge = parentPath
          ? this.filterPath(parentPath) + this.filterPath(node.path)
          : this.filterPath(node.path);
        node.fullPath = merge;
        if (node.children && node.children.length > 0) {
          this.addParentId(node.children, node.fullPath);
        }
      });
      return tree;
    },
    filterPath(path) {
      path = path.charAt(0) === "/" ? path : "/" + path;
      return path;
    },

    //是否当前路由
    isCurrentRoute(key) {
      if(this.$route.path == '/user/projectInfo' && this.userType == '01' && key.indexOf("/enterpriseService") > -1) {
        return true;
      }
      return this.$route.path.indexOf(key) > -1;
    },

    handlerRouter(key) {
      if (this.ishttp(key)) {
        //说明创建路由选择的是外部链接
        window.open(key, "_blank");
      } else {
        // if(key == "/Project") {
        //   const route = this.routers.find(item => item.path === key);
        //   this.$router.push({ path: route.path + '/' + route.children[0].path });
        //   return;
        // }
        this.$router.push({ path: key });

        // if (routeMenu && routeMenu.query) {
        //   let query = JSON.parse(routeMenu.query);
        //   this.$router.push({ path: key, query: query });
        // } else {

        // }
      }
    },

    ishttp(url) {
      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
    },
  },
  computed: {
    ...mapGetters(["sidebarRouters"]),
    theme() {
      return this.$store.state.settings.theme;
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.topbarRouters;
    },
    // 顶部显示菜单
    // topMenus() {
    //   let topMenus = [];
    //   this.sidebarRouters.map((menu) => {
    //     if (menu.hidden !== true && menu.redirect !== "index") {
    //       // 兼容顶部栏一级菜单内部跳转
    //       if (menu.path === "/") {
    //         topMenus.push(menu.children[0]);
    //       } else {
    //         topMenus.push(menu);
    //       }
    //     }
    //   });
    //   return topMenus;
    // },
  },
};
</script>

<style lang="scss" scoped>
.men-main {
  display: flex;
  align-items: center;
  .menu-item {
    font-size: 18px;
    color: #ffffff;
    font-weight: 500;
    font-style: normal;
    text-transform: none;
    margin: 0 10px;
    padding: 3px 6px;
    cursor: pointer;
  }
  .activeMenu {
    background: #3b4aa2;
    border-radius: 32px 32px 32px 32px;
    border: 1px solid #ffffff;
  }
}
</style>