一. 什么是面包屑导航

面包屑挺巧就是琐碎的意思，一点点的形状，这就代表我们的网站导航中，那些不在主导航上，其他辅助性琐碎的导航就叫面包屑导航了

二. 面包屑导航的作用

1.对于用户可以快速知道自己当前在网站位置，并且极有可能查看该导航下面的所有内容，对于提升用户体验是有极大帮助的。

2.对于搜索引擎每个网站的界面非常多，并不能清晰的知道哪些界面对于你的网站而言更重要。但是面包屑导航告诉了爬虫，这个导航下面所有的内容都指向了这个这个导航集合界面，说明这个界面很重要，会极大的提升该导航在网站的内部权重，会更加容易被搜索引擎收录，这种集合类的界面更容易解决各种用户的问题，降低网站的跳出率，对于提升排名也是非常有好处的。点击面包屑导航，就会进入整个集合界面，不仅给用户一个全新的系统性的界面，给用户增大了吸引力，同时也给搜索引擎一个全新的结合类的界面。对二者都比较有利

三. 网站面包屑导航的类型

1、路径型：路径型面包屑是一个动态显示用户到达页面经过的途径;

2、位置型：位置型面包屑是固定的，显示了页面在网站结构中的位置;

3、属性型：属性型面包屑给出的当前页面的分类信息。

面包屑导航一般都在导航的下面，形式一般为首页 > 一级目录名称 > 二级目录名称 > 目前位置，尽量要把面包

屑导航的层次控制在四层以内，这样也有利与搜索引擎蜘蛛一层层往下爬，到了四层以下就很难爬到了

四. 实现面包屑导航

外层面包屑导航

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

<script>
import { provide } from 'vue'
export default {
  name: 'XtxBread',
  props: { sparator: { type: String, default: '>' } },
  setup (props) {
    // 定义数据给后代
    provide('sparator', props.sparator)
  }
}
</script>

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

  // 最后一个i隐藏
  ::v-deep i:nth-last-child(1){
    display: none;
  }
}

</style>

内层面包屑导航

<template>
  <div class="xtx-bread-item">
    <!-- 如果有to，就设置路由跳转，否则，就是span -->

    <RouterLink v-if="to" :to="to"><slot>首页</slot></RouterLink>
    <span v-else><slot>首页</slot></span>
  </div>
  <i>{{sparator}}</i>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: {
    to: { type: String, default: '' }
  },
  setup () {
    const sparator = inject('sparator')

    console.log('inject', sparator)

    return { sparator }
  }
}
</script>
<style lang="less" scoped>
.xtx-bread-item {
  a {
    color: #666;
    transition: all .4s;
    &:hover {
      color: @xtxColor;
    }
  }
  i {
    font-size: 12px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 22px;
  }
}

</style>

使用面包屑导航组件

<XtxBread separator="＞">
        <xtxBreadItem to="/">首页</xtxBreadItem>
        <xtxBreadItem> {{ cateList.name }} </xtxBreadItem>
      </XtxBread>