vue3 + elementPlus 实现面包屑功能
文章后面附效果图
数据结构
首先展示一下数据基础结构
红色框框是默认存在的数据,其他数据就是通过选中侧边栏菜单进行数据插入
关键数据字段为 path, meta
准备侧边栏
首先需要自己准备一个侧边栏
这边就不进行讲解，上个效果图
实现面包屑代码
<template>
// 面包屑组件， separator为分割线，具体可以去elementPlus官网查看
<el-breadcrumb separator="/">
<div class="breadcrumb-content">
// 动画组件 [官网链接](https://cn.vuejs.org/guide/built-ins/transition.html)
<transition-group name="breadcrumb">
<el-breadcrumb-item class="breadcrumb-item" v-for="item in arr.breadCrumbList" :key="item.path">
<span v-if="item.redirect === route.path">
{
{
item.meta.title }}
</span>
<a v-else @click="handleLine(item)">{
{
item.meta.title }}</a>
</el-breadcrumb-item>
</transition-group>
</div>
</el-breadcrumb>
</template>
<script setup lang="ts">
const router = useRouter();
// 面包屑数据
let arr = reactive({
breadCrumbList: [],
});
const route = useRoute();
// 获取面包屑数据
const getBreadcrumbList = () => {
arr.breadCrumbList = [];
route.matched.forEach((item) => {
if (item.meta.title) arr.breadCrumbList.push(item);
});
// 判断是否存在首页默认数据，不存在就插入到数据首位
if (!arr.breadCrumbList.length || arr.breadCrumbList[0].name !== "Dashboard")
arr.breadCrumbList.unshift({
path: "/dashboard/index",
meta: {
title: "首页" },
});
};
getBreadcrumbList();
// 监听路由变化
watch(route, () => {
getBreadcrumbList();
});
// 面包屑跳转
const handleLine = ({
redirect, path }) => {
redirect ? router.push(redirect) : router.push(path);
};
</script>
<style lang="less" scoped>
.el-breadcrumb {
display: flex;
padding-left: 10px;
line-height: 50px;
background-color: #f6f6f6;
}
.breadcrumb-item {
margin-left: 8px;
}
.breadcrumb-content {
position: relative;
}
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all 0.5s;
}
.breadcrumb-enter-from,
.breadcrumb-leave-active {
opacity: 0;
}
.breadcrumb-move {
transition: all 0.5s;
}
.breadcrumb-leave-active {
position: absolute;
right: -50px;
}
</style>
效果图
