Vue实现面包屑功能(el-breadcrumb)

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>

效果图