Vue基于el-breadcrumb实现面包屑功能(操作代码)

<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>