food/src/components/Breadcrumb.vue

<template>
  <el-breadcrumb separator-class="el-icon-caret-right" class="app-breadcrumb">
    <el-breadcrumb-item>
      <!-- <router-link to="/">飞机主控</router-link> -->
      {{ $route.meta.tapName === "plane" ? "飞机主控" : "小程序后台" }}
    </el-breadcrumb-item>
    <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
      <!-- <router-link :to="item.path">{{ item.title }}</router-link> -->
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>

export default {
  name: 'Breadcrumb',
  data () {
    return {
      breadcrumb: []
    }
  },
  mounted () {
    this.refreshBreadcrumb()
  },
  computed: {
    /**
     * @description: 拿路由列表 并过滤不显示项 和没有权限项
     */
    routes () {
      return this.$router.options.routes.filter(
        item => item.meta.hidden !== true && item.meta.roles.indexOf(this.$store.state.user.power.trim()) >= 0
      )
    },
    /**
     * @description: 当前路径
     */
    presentPath () {
      return this.$route.path
    }
  },
  watch: {
    presentPath () {
      this.refreshBreadcrumb()
    }
  },
  methods: {
    /**
     * @description: 刷新面包条数据
     */
    refreshBreadcrumb () {
      const temp = []
      this.routes.forEach(element => {
        element.children.forEach(child => {
          if (this.presentPath.search(child.path) !== -1) {
            temp[0] = { title: element.meta.title, path: element.path }
            temp[1] = { title: child.meta.title, path: child.path }
          }
        })
      })
      this.breadcrumb = temp
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.el-breadcrumb * {
  font-weight: normal !important;
  color: $maintext-color !important;
  font-size: 14px;
  line-height: 50px;
  cursor: text;
}
</style>