vue3——自己封装面包屑功能组件

---

前言

面包屑导航可以将浏览过的页面记录下来，方便很快速的跳转回某一个页面，本文介绍了几种自己封装面包屑组件的方式，我们一起来看看如何实现的吧~

---

一、为什么需要面包屑？

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。

看完上面的介绍，相信各位已经理解了面包屑组件的使用场景了。对的，没错，是用来记录我们点击了哪些页面，方便我们再返回之前某一个页面。

当网页进行了多次跳转后，用户可能早就已经晕头转向了。作为程序猿的我们可能通过地址栏参数还可以分清楚当前处于哪一个位置，终归网页是要展示给用户。用户来使用的话，没有面包屑导航的话，可能就对网页产生了抵触心理，使用面包屑导航将每次跳转的页面记录下来，可以很好解决这一问题。

二、初级封装

1. 实现思路

• 准备页面结构和样式,需要用到字体图标
  在public目录下的index.html中引入cdn的字体图标资源

  <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
  

• 将需要外部传入的值定义为自定义属性
• 将外部写在标签内部的内容放置在默认插槽中

2. 代码演示

在src/components目录下新建bread-crumbs.vue文件，公用的组件放在这个目录下统一管理，文件名可自定义。

代码如下（示例）：

<template>
  <div class='bread-crumbs'>
    <div class="bread-crumbs-item">
      <RouterLink to="/">首页</RouterLink>
    </div>
    <i class="iconfont icon-angle-right"></i>

    <div v-if="parentName" class="bread-crumbs-item">
      <RouterLink v-if="parentPath" :to="parentPath">{
   {
   parentName}}</RouterLink>
      <span v-else>{
   {
   parentName}}</span>
    </div>

    <i v-if="parentName" class="iconfont icon-angle-right"></i>

    <div class="bread-crumbs-item">
      <span>
          <slot/>
      </span>
    </div>
  </div>
</template>

<script>
export default {
   
  name: 'BreadCrumbs',
  props: {
   
    parentName: {
   
      type: String,
      default: ''
    },
    parentPath: {
   
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang='less'>
.bread-crumbs{
   
  display: flex;
  padding: 25px 10px;
  &-item {
   
    a {
   
      text-decoration: none;
      color: #666;
      transition: all .4s;
      &:hover {
   
        color: #27ba9b;
      }
    }
  }
  i {
   
    font-size: 12px;
    font-style: normal;
    margin-left: 5px;
    margin-right: 5px