vue项目中手动封装面包屑导航

Posted 2021-08-17 奥特曼　

目录

 

什么是面包屑导航？

 实现面包屑导航

 逐一分析

---

 

什么是面包屑导航？

面包屑包的烧鸡吗？

真实的面包屑导航

由来：面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

作用：可以更清晰的告诉用户 当前所在导航的层次级别关系，也给用户提供了返回的途径

仿照elemenUI组件封装一个 一抹一样的面包屑导航

分析

1. 完整面包屑导航包括两个组件，el-breadcrumb 和 el-breadcrumb-item  

2. el-breadcrumb 接受名称为separator的prop参数传入，决定了分隔符的显示

3. el-breadcrumb-item 组件接受名称为to的prop参数传入，如果有则可以跳转，如果没有显示纯文字

我们的组件也按照这样的一个大概思想，把完整的面包屑功能分成俩个组件：

1. 外层的是XtxBread组件：它负责接收分隔符separator的传入

2. 内层的是XtxBreadItem 组件：它负责to属性的传入用来完成跳转功能

 实现面包屑导航

外层面包屑导航 xtx-bread.vue

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

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

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

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

内层面包屑导航 xtx-bread-item.vue

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

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: String,
      default: ''
    }
  },
  setup () {
    const separator = inject('separator')
    return { separator }
  }
}
</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;
    }
    // 最后一个i隐藏
    &:nth-last-of-type(1){
      i{
        display: none;
      }
    }
  }
</style>

使用 面包屑导航组件 

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

逐一分析

结构分析 

外层面包屑导航 简称外层 外层内部只用了<slot>插槽 只是起到一个 传分隔符的作用 例如 a>b>c 中的> , 通过使用组件时传入  separator属性绑定要显示分隔的字符串,因为内层并没有在外层注册内层组件，只是在使用的时候用 外层的插槽 包住了 内层  所以不能使用父传子，先去props接收使用组件传递过来的值 再去利用provide进行祖先级进行传递，内层组件通过inject去接收 

 内层面包屑导航  主要显示都在内层面包屑导航了，通过使用组件 传递过来的to属性 去判断  如果有to就用<router-link :to="to"><router-link> 包起来，如果没to 就不需要包起来 这时候你可能疑问 为什么还会有不包起来的情况 

当你在地球级别下 已经是最后一级了 不需要再去点击了 而前面两个有所不同，点击前两个需要跳转不同的页面 

 使用面包屑导航组件 一般传入 separator 给外层作为分隔符  给内层传入to属性 作为要跳转的链接