简单注册一个全局的面包屑/

我们先搞一个全局的自动注册组件的一个插件；我们开始

src/components/index.js

// 这里我们先匹配 (libary 文件夹下的; 是否深度检索; 正则: 匹配 .vue 文件)
const requireComponent = require.context('./libary', true, /\.vue$/)
export default {
  install (Vue) {
    // 在循环遍历
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
      /* 获取的是 每一个组件暴露出来的对象 */
      const defaultObj = requireComponent(item).default
      // 直接注册
      Vue.component(defaultObj.name, defaultObj)
    })
  }
}

// 使用的话就是直接全局组件的名字
/////
<script>
export default {
  name: 'Goods',
  props: {
    to: {
      type: String
    }
  },
  setup () {
  }
}
</script>
/////
示例: <Goods></Goods>

main.js

引入刚刚的插件
import componentPlugin from '@/components/index.js'
// 全局注册组件
createApp(App).use(componentPlugin)

现在来搞面包屑.

index.vue
// 使用两个免费的组件(在上面的 libary 文件夹下新建的两个 .vue 文件)

<template>
  <XtxBread>
    <XtxBreadItem to="nima">主页</XtxBreadItem>
    <XtxBreadItem to="">分页</XtxBreadItem>
  </XtxBread>
</template>

<script>
// 直系亲属传值(只限单方面父传后代)
import { provide } from 'vue'

export default {
  name: 'home',
  setup () {
    provide('separator', '>')
  }

}
</script>

第一层

src/components/libary/xtx-bread.vue

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

<script>
export default {
  name: 'XtxBread',
}
</script>

<style lang='less'  scoped>
.xtx-bread {
  display: flex;

  /deep/.xtx-bread-item:last-child {
    span {
      display: none;
    }
  }
}
</style>

第二层

src/components/libary/Slider/xtx-bread-item.vue

<template>
  <div class="xtx-bread-item">
    <router-link v-if="to" :to="to">
      <slot></slot>
    </router-link>
    <template v-else>
      <slot></slot>
    </template>
    <span>{{ separator }}</span>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: String
    }
  },
  setup () {
    const separator = inject('separator')
    return { separator }
  }
}
</script>
<style lang='less'  scoped>
</style>

效果图: 额！虽然不好看但是, 没有但是，确实不好看！