hr-admin/src/components/vBread/vBread.vue

<!--
 * @Author       : yuanrunwei
 * @Date         : 2020-05-18 12:05:37
 * @LastEditors: XuTongZhang
 * @LastEditTime: 2020-07-28 16:40:45
 * @FilePath     : \ambre-admin-noob\src\components\vBread\vBread.vue
-->
<template>
  <div class="vBreadCom">
    <el-breadcrumb v-if="$route.name === 'home'" separator="/">
      <el-breadcrumb-item class="home">首页</el-breadcrumb-item>
      <el-breadcrumb-item class="select">首页</el-breadcrumb-item>
    </el-breadcrumb>
    <el-breadcrumb v-else separator="/">
      <el-breadcrumb-item class="home">{{first}}</el-breadcrumb-item>
      <el-breadcrumb-item class="select">{{last}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: {
    path: {
      type: String,
      default: () => '0-0'
    },
    nav: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      first: '',
      last: ''
    }
  },
  watch: {
    $route () {
      this.getBreadcrumb()
    }
  },
  methods: {
    getBreadcrumb () {
      let parentName = []
      this.nav.forEach(item => {
        parentName.push({
          name: item.name,
          child: item.child
        })
      })
      parentName.forEach(item => {
        item.child.forEach(i => {
          if (i.to === this.$route.name) {
            this.first = item.name
            this.last = i.name
          }
        })
      })
    }
  }
}
</script>

<style lang='scss'>
@import './vBread.scss';
</style>