vue项目——创建面包屑布局——基础积累

最近在写后台管理系统，看到同事写了后台管理系统中的面包屑部分。

此处记录一下面包屑部分的写法：

1.html部分

<div :class="['tabs-head', layout, pageWidth]">
 <div class="head-breadcrumb">
   <a-breadcrumb separator=">" :routes="breadcrumbList">
     <template slot="itemRender" slot-scope="{ route, routes }">
       <span v-if="routes.indexOf(route) === routes.length - 1">//如果是面包屑的最后一级，则表示是当前页面，可以不用路由展示
         {{ route.name }}
       </span>
       <router-link v-else :to="route.toPath">//除了当前页面，其他的路由都应该可以点击进行跳转
         {{ route.name }}
       </router-link>
     </template>
   </a-breadcrumb>
 </div>
 //页签部分，这个可以看上一篇文章
</div>

上面的代码，其实可以在antd的官网上找到。
上面代码中的class有的是使用的变量，比如:layout pageWidth等，这个跟其他组件配合使用的。基本可以写死。

2.style部分

.tabs-head {
  margin: 0 auto;
  &.head.fixed {
    width: 1400px;
  }
}
.head-breadcrumb {
  width: 100%;
  height: 48px;
  padding: 14px 40px;
  background-color: #fff;
  position: fixed;
  top: 64px;
  left: 80px;
  z-index: 3;
}
.tabs-container {
  margin: -16px auto 8px;
  transition: top, left 0.2s;
  .header-lock {
    font-size: 18px;
    cursor: pointer;
    color: @primary-3;
    &:hover {
      color: @primary-color;
    }
  }
  &.affixed {
    margin: 0 auto;
    top: 0px;
    padding: 10px 20px 0;
    position: fixed;
    height: 50px;
    z-index: 3;
    background-color: #fff;
    &.side,
    &.mix {
      right: 0;
      left: 220px;
      &.collapsed {
        left: 80px;
        box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 5%);
      }
    }
    &.head {
      width: inherit;
      padding: 8px 0 0;
      &.fluid {
        left: 0;
        right: 0;
        padding: 8px 24px 0;
      }
    }
    &.fixed-header {
      top: 102px;
    }
  }
}

3.breadcrumbList面包屑路由列表

data(){
	return{
		breadcrumbList:[]
	}
},
created(){
	this.getBreadcrumbList(this.$route.matched);
},
watch: {
  $route(n) {
    this.getBreadcrumbList(n.matched);
  },
},
methods:{
	// 获取面包屑数据
    getBreadcrumbList(matched) {
      console.log("matched", matched);
      const list = matched.filter((item) => {
        return !item.meta.notBreadcrumb;
      });
      list.forEach((item) => {
        if (item.redirect) {
          item.toPath = item.redirect;
        } else {
          item.toPath = item.path;
        }
      });
      this.breadcrumbList = list;
    },
}

4.路由配置页面config.js中的配置

完成！！！

上面打印出来matched的数据格式如下：