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

在后管理系统开发中，面包屑导航是一个非常常见的功能，通常是根据当前的 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-item
                v-for="(item, index) in breadcrumbData"
                :key="item.path">
                <span
                    v-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;
}

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

4. 组件使用示例