一、前言：

以下是 element-plus 官网的面包屑及相关代码，看了一眼，很好奇，我也想要一个可爱的面包屑嗯!

二、面包屑的前期准备工作

1、开始动手，新建面包屑的相关文件夹及文件

2、Src/components/index.js 注册全局组件

// 法1 批量注册为全局
// export default { // 默认导出
//   install (app) {
//     // 1.深度查找每一项
//     const requireComponet = require.context('./', true, /\.vue$/)
//     // 2.循环遍历深度查找的每一项
//     requireComponet.keys().forEach(item => {
//       // 3.获取数组对象
//       const moduleObj = requireComponet(item).default
//       console.log(moduleObj, '00')
//       // 4.循环注册组件
//       app.component(moduleObj.name, moduleObj)
//     })
//   }
// }

// 法2 以插件形式注册为全局
import LwxBread from './Bread'
import LwxBreadItem from './Bread/BreadItem.vue'
export default {
  install (app) {
    app.component(LwxBread.name, LwxBread)
    app.component(LwxBreadItem.name, LwxBreadItem)
  }
}

复制代码

3、main.js 导入并使用 createApp(App).use（）

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入批量注册或以插件形式注册的全局组件函数
import componentPlugins from '@/components'

createApp(App).use(componentPlugins).use(store).use(router).mount('#app')
复制代码

二、面包屑的详细代码

1、src/components/Bread/index.vue 面包屑主体

<template>
  <div class='lwx-bread'>
    <slot />
  </div>
</template>

<script>
import { provide } from 'vue'
export default {
  name: 'LwxBread',
  // 1.接收 父组件 传递过来的 separator 分隔符
  props: {
    separator: {
      type: String,
      // ◆如果父组件没有传 separator 过来，可以自己定一个默认值
      default: '/'
    }
  },
  setup (props) {
    // 2.把接收的 分隔符 提供出去 给 LwxBreadItem
    provide('separator', props.separator)
  }
}
</script>
<style scoped lang="less">
.lwx-bread {
  display: flex;
  padding: 25px 10px;
  /deep/ &-item {
    a {
      color: #666;
      transition: all 0.4s;
      text-decoration: none;
      &:hover {
        color: #27BA9B;
      }
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}
</style>
复制代码

2、src/components/Bread/BreadItem.vue 面包屑子集

<template>
    <div  class="lwx-bread-item">
        <!-- ◆如果 没有 to 就给个占位符：点击不能跳转的-->
        <template v-if="!to">
            <slot></slot>
        </template>
        <!-- ◆如果 有 to 就给 router-link ：点击可以跳转 -->
        <template v-else>
            <router-link :to="to"> <slot></slot> </router-link>
        </template>
        <!-- 4.使用分隔符:如果前面没有传 separator ，也没有默认值，可以自己定义一个（字体图标等）-->
         <i v-if="separator">{{ separator }}</i>
         <i v-else>&gt;</i>
    </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'LwxBreadItem',
  props: {
  // ◆接收 从 父组件 传递过来的 to ，父组件传什么类型，我们就收什么类型
    to: {
      type: String
    }
  },
  setup () {
    // 3.从 Lwxbread 身上接收分隔符
    const separator = inject('separator')
    return { separator }
  }
}
</script>
<style lang="less" scoped>
.lwx-bread-item {
     color: #ccc;
  i {
    margin: 0 6px;
    font-size: 10px;
  }
  // 最后一个i隐藏
  &:nth-last-of-type(1) {
    i {
      display: none;
    }
  }
}
</style>
复制代码

3、app.vue 全局使用 面包屑

<template>
  <div>
    <!-- 6.父传子  把 separator 传给 子组件 LwxBread  -->
     <LwxBread separator="＞＞">
       <LwxBreadItem to="'/'">首页</LwxBreadItem>
       <LwxBreadItem >电子产品</LwxBreadItem>
       <LwxBreadItem >手机</LwxBreadItem>
       <LwxBreadItem >华为plus</LwxBreadItem>
     </LwxBread>
  </div>
</template>
复制代码