后台管理系统动态面包屑Ｂreadcrumb组件的实现

embedded/2025/1/7 19:30:13/

在后管理系统开发中，面包屑导航是一个非常常见的功能，通常是根据当前的 url 自动生成面包屑导航菜单，当跳转路由发生变化时，面包屑导航都会随之发生变化，即动态面包屑。

要完成动态面包屑我们需要制作一个动态数组，数组中每个 item 都表示一个路由信息，在这里我们使用到route.match 属性，该属性可以获取路由地址匹配的标准化的路由记录。

1. 动态计算面包屑结构数据

<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";const route = useRoute();// 生成数组数据
const breadcrumbData = ref([]);
const getBreadcrumbData = () => {breadcrumbData.value = route.matched.filter((item) => item.meta && item.meta.title);
};// 监听路由变化
watch(route,() => {getBreadcrumbData();},{ immediate: true }
);</script>

2. 依据动态数据渲染面包屑

<template><el-breadcrumb class="breadcrumb" separator="/"><transition-group name="breadcrumb"><el-breadcrumb-itemv-for="(item, index) in breadcrumbData":key="item.path"><spanv-if="index === breadcrumbData.length - 1"class="no-redirect">{{ item.meta.title }}</span><a v-else class="redirect" @click.prevent="onLinkClick(item)">{{ item.meta.title }}</a></el-breadcrumb-item></transition-group></el-breadcrumb>
</template><script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";const route = useRoute();// 生成数组数据
const breadcrumbData = ref([]);
const getBreadcrumbData = () => {breadcrumbData.value = route.matched.filter((item) => item.meta && item.meta.title);
};// 监听路由变化
watch(route,() => {getBreadcrumbData();},{ immediate: true }
);// 处理点击事件
const router = useRouter();
const onLinkClick = (item) => {router.push(item.path);
};
</script><style lang="scss" scoped>
.breadcrumb {display: inline-block;font-size: 14px;line-height: 50px;margin-left: 8px;.no-redirect {color: #97a8be;cursor: text;}.redirect {color: #666;font-weight: 600;}.redirect:hover {color: #304156;}
}
</style>

3. 面包屑添加动画

为了体验更好，还要为面包屑增加一些动画样式，在上面的组件中添加了动画标签transition-group，以下是标签对应的name动画样式实现：

// style/transition.scss.breadcrumb-enter-active,
.breadcrumb-leave-active {transition: all 0.5s;
}.breadcrumb-enter-from,
.breadcrumb-leave-active {opacity: 0;transform: translateX(20px);
}.breadcrumb-leave-active {position: absolute;
}

以上样式文件记得在全局中引入。