手写面包屑

技术点： 插槽 slot、router-link

使用：

1. 新建组件 BreadItem.vue

（to 接受跳转路径）

  <div class="xtx-bread-item">
    <!-- v-if 判断是否能点击(是否传参) -->
    <router-link to="/" v-if="to">
      <slot></slot>
    </router-link>
    <span v-else>
      <slot></slot>
    </span>
    <!--每个组件使用的图标可能不同也需要判断 -->
    <i v-if="iconBread"> {{ iconBread }} </i>
    <i v-else class="iconfont icon-angle-right"></i>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'BreadItem',
  //   是否点击
  props: {
    to: {
      type: String
    }
  },
  setup () {
    //   组件图标
    const iconBread = inject('separator')
    return { iconBread }
  }
}
</script>

2. 新建 Bread.vue 组件

  <div class="xtx-bread">
    <slot></slot>
  </div>
</template>

<script>
import { provide } from 'vue'
export default {
  name: 'Bread',
  props: {
    separator: {
      type: String,
      default: ''
    }
  },
  setup (props) {
    provide('separator', props.separator)
  }
}
</script>

3. 组件使用

```
    <Bread iconBread='-'>
        <BreadItem to="/">首页</BreadItem>
        <BreadItem>{{ categoryName }}</BreadItem>
    </Bread>