快捷導(dǎo)航

Vue基于el-breadcrumb實現(xiàn)面包屑功能(操作代碼)

更新時間：2023年09月06日 16:28:28 作者：別改我bug

這篇文章主要介紹了Vue基于el-breadcrumb實現(xiàn)面包屑功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

vue3 + elementPlus 實現(xiàn)面包屑功能

文章后面附效果圖

數(shù)據(jù)結(jié)構(gòu)

首先展示一下數(shù)據(jù)基礎(chǔ)結(jié)構(gòu)
紅色框框是默認存在的數(shù)據(jù),其他數(shù)據(jù)就是通過選中側(cè)邊欄菜單進行數(shù)據(jù)插入
關(guān)鍵數(shù)據(jù)字段為 path, meta

在這里插入圖片描述

準(zhǔn)備側(cè)邊欄

首先需要自己準(zhǔn)備一個側(cè)邊欄這邊就不進行講解，上個效果圖

在這里插入圖片描述

實現(xiàn)面包屑代碼

<template>
// 面包屑組件， separator為分割線，具體可以去elementPlus官網(wǎng)查看
  <el-breadcrumb separator="/">
    <div class="breadcrumb-content">
    	// 動畫組件  [官網(wǎng)鏈接](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();
// 面包屑數(shù)據(jù)
let arr = reactive({
  breadCrumbList: [],
});
const route = useRoute();
// 獲取面包屑數(shù)據(jù)
const getBreadcrumbList = () => {
  arr.breadCrumbList = [];
  route.matched.forEach((item) => {
    if (item.meta.title) arr.breadCrumbList.push(item);
  });
  // 判斷是否存在首頁默認數(shù)據(jù)，不存在就插入到數(shù)據(jù)首位
  if (!arr.breadCrumbList.length || arr.breadCrumbList[0].name !== "Dashboard")
    arr.breadCrumbList.unshift({
      path: "/dashboard/index",
      meta: { title: "首頁" },
    });
};
getBreadcrumbList();
// 監(jiān)聽路由變化
watch(route, () => {
  getBreadcrumbList();
});
// 面包屑跳轉(zhuǎn)
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>