最近在写后台管理系统，看到同事写了后台管理系统中的面包屑部分。
此处记录一下面包屑部分的写法：
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的数据格式如下：
