<script>
export default {
  data() {
    return {
      breadCrumbList:[{"icon":"h-icon-shouye","to":"./","meta":{"icon":"h-icon-shouye","title":"首页"}},{"name":"environment","to":"./environment","meta":{"title":"角色管理","notCache":true,"icon":"h-icon-user"}},{"name":"environment","meta":{"title":"数据权限","notCache":true,"icon":"h-icon-shujuquanxian"}}]
    }
  },
  created() {},
  methods: {
  }
}
</script>
<style lang="less" scoped>
  .demo-block {
    >div {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>

# 面包屑组件

----
采用`iview-ui`中的样式变量，简化功能，熟悉 css \(^o^)/~。

### 基础用法

- 基础的breadcrumb用法

<div class="demo-block">
  <div>

  <h-breadcrumb
  :breadCrumbList="breadCrumbList">
      </h-breadcrumb>
  </div>
</div>

:::demo



```html
  <div>
      <h-breadcrumb
      :breadCrumbList="breadCrumbList">
      </h-breadcrumb>
  </div>
  <script>
 export default {
  data() {
    return {
      breadCrumbList:[
        {
          "icon":"h-icon-shouye",
          "to":"./",
          "meta":{
            "icon":"h-icon-shouye",
            "title":"首页"
          }
        },
        {
          "name":"environment",
          "to":"./environment",
          "meta":{
            "title":"角色管理",
            "notCache":true,"
            icon":"h-icon-user"
          }
        },
        {
          "name":"environment",
          "meta":{
            "title":"数据权限",
            "notCache":true,
            "icon":"h-icon-shujuquanxian"
          }
        }
      ]
    }
  },
  created() {},
  methods: {
  }
}
</script>

```
:::
### Attributes
| 参数         | 说明                 | 类型   | 可选值 | 默认值 |
| ------------ | -------------------- | ------ | ------ | ------ |
| breadCrumbList       | 面包屑数组         | Array  |  -     |  -  |
| everyIcon         | 是否所有title显示icon         | Boolean  |  -     | false   |




