scocial-management-platform-frontend/src/views/main/main-content-crumb.vue

<template>
  <div class="smp-crumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item,index) in menuChain" :key="index" :to="{ path: '/'+item.UUID }">{{item.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <div class="smpc-item" v-for="(item,index) in menuChain" :key="index">
      <i v-if="index!==0">></i>
      <span :class="index===menuChain.length-1">{{item.name}}</span>
    </div> -->
    <!-- <div class="smpc-item"><span>首页</span></div>
    <div class="smpc-item">
      <i>></i>
      <span class="on">监测预警</span>
    </div> -->
  </div>
</template>

<script>
export default {
  data () {
    return {
      UUID: this.$route.meta.UUID,
      menuList: window.SITE_CONFIG['menuList'],
      menuChain: []
    }
  },
  watch: {
    $route () {
      this.UUID = this.$route.meta.UUID
      this.initCrumb()
    }
  },
  mounted () {
    this.initCrumb()
  },
  methods: {
    initCrumb () {
      let item = this.menuList.filter((e) => {
        return e.UUID === this.UUID
      })
      this.menuChain = item
      this.setParentItem(item[0].parentUUID)
      // let menuChain = []
      // this.menuChain.forEach((e, i) => {
      //   console.log(e.url)
      //   let obj = {
      //     ...e,
      //     id: e.UUID,
      //     url: e.url ? e.url : e.path ? ('/' + e.path) : ''
      //   }
      //   if (i === this.menuChain.length - 1) {
      //     obj.url = ''
      //   }
      //   menuChain.push(obj)
      // })
      // this.menuChain = menuChain
      // console.log(this.menuChain, this.menuList)
    },
    findParent (parentId) {
      let parent = this.menuList.filter((e) => {
        return e.UUID === parentId
      })
      return parent[0] ? parent[0] : ''
    },
    setParentItem (parentId) {
      // console.log(parentId)
      let _lastItem = this.findParent(parentId)
      if (_lastItem) {
        this.menuChain.unshift(_lastItem)
        this.setParentItem(_lastItem.parentUUID)
      }
    }
  }
}
</script>

<style lang="scss">
.smp-crumb{
  // padding: 0!important;
}
</style>