# Breadcrumb 面包屑

> 面包屑组件，可根据项目的 router 自动识别路由地址，进行导航的地址的路由切换。

### 基础用法

::: demo 组件 Breadcrumb 使用示例

```vue
<template>
  <dg-breadcrumb class="breadcrumb" v-if="!breadcrumbFlag"></dg-breadcrumb>
  <div class="dirty_info">
    <el-badge class="item">
      <el-button size="small" @click="getMdmDirtyBySysCode">全部</el-button>
    </el-badge>
    <el-badge :value="PRIKEY_REPEATED" class="item">
      <el-button size="small" @click="getMdmDirtyByErrCode_P">主键重复数据</el-button>
    </el-badge>
    <el-badge :value="KEY_REPEATED" class="item">
      <el-button size="small" @click="getMdmDirtyByErrCode_F">外键错误数据</el-button>
    </el-badge>
    <el-badge :value="KEY_ATTR" class="item" type="primary">
      <el-button size="small" @click="getMdmDirtyByErrCode_K">关键属性错误</el-button>
    </el-badge>
    <el-badge :value="OTHER_KEY_ATTR" class="item" type="warning">
      <el-button size="small" @click="getMdmDirtyByErrCode_O">非关键属性错误</el-button>
    </el-badge>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      breadcrumbFlag: false,
      PRIKEY_REPEATED: '',
      KEY_REPEATED: '',
      KEY_ATTR: '',
      OTHER_KEY_ATTR: '',
    }
  },
  methods: {
    getMdmDirtyBySysCode() {},
    getMdmDirtyByErrCode_P() {},
    getMdmDirtyByErrCode_F() {},
    getMdmDirtyByErrCode_K() {},
    getMdmDirtyByErrCode_O() {},
  },
}
</script>
```

:::
`

## API

| 属性 | 说明 | 类型 | 默认值 |
| ---- | ---- | :--: | :----: |

## 更新日志

#### v1.0.0（2019-09-17）

- 初始版本

#### v1.0.9（2020-03-07）

- 完善文档