order-ui-pc/src/components/globalComponents/main-menu/main.vue

<template>
  <div class="mainMenu">
    <router-link
      :class="{ activeLink: active === index }"
      :to="item.child"
      v-for="(item, index) in mainList"
      :key="'mainMenu' + index"
      >{{ item.meta.title }}</router-link
    >
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "mainMenu",
  data() {
    return {
      active: -1,
      list: [],
    };
  },

  computed: {
    //组件SIZE设置
    ...mapGetters(["mainList"]),
  },
  watch: {
    $route(route) {
      if (route.path.startsWith("/redirect/")) {
        return;
      }
      this.getBreadcrumb();
    },
  },
  created() {
    this.getBreadcrumb();
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(
        (item) => item.meta && item.meta.title
      );

      let levelList = matched.filter(
        (item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
      );
      if (levelList[0] && levelList[0].path) {
        this.active = this.mainList.findIndex(
          (v1) => v1.path === levelList[0].path
        );
      } else {
        this.active = -1;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.mainMenu {
  width: calc(100% - 200px);
  padding: 5px 0 0 20px;
  display: inline-block;
  a {
    display: inline-block;
    padding: 0 20px;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    color: #232323;
    font-weight:normal;
    &.activeLink {
      color: #63cbe7;
      font-weight: bold;
    }
  }
}
</style>