iot-front-ui/src/components/breadcrumb/iotBreadcrumb.vue

<template>
  <div class="home-breadcrumb">
    <a-breadcrumb>
      <a-breadcrumb-item @click="toHome">首页</a-breadcrumb-item>
      <a-breadcrumb-item v-for="item in levelList" :key="item.name">{{ item.meta.breadcrumb }}</a-breadcrumb-item>
    </a-breadcrumb>
    <br>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelList: []
    }
  },
  watch: {
    $route(route) {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      this.levelList = []
      let arr = this.$route.matched
      for (let i = 1; i < arr.length; i++) {
        this.levelList.push(arr[i])
      }
    },
    toHome() {
      this.$router.push('home');
    },
    handleLink(item) {
      let path = item
      this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
.home-breadcrumb {
  //display: inline-block;
  //vertical-align: top;
  //font-size: 14px;
  height: 25px;
  margin: 10px 0px 10px 10px;
}
</style>