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();// 获取面包屑数据constgetBreadcrumbList=()=>{
  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();});// 面包屑跳转consthandleLine=({ 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>

效果图