Vue3實現(xiàn)動態(tài)面包屑的代碼示例

更新時間：2023年07月11日 11:57:10 作者：前端隨想

這篇文章主要給大家介紹一下Vue3動態(tài)面包屑是如何實現(xiàn)的，實現(xiàn)思路又是什么，以及發(fā)給大家介紹一下面包屑的功能，文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

前言

在進(jìn)行項目開發(fā)的過程中，我們一般會使用面包屑的功能，這個功能還是比較常見的，那么他的實現(xiàn)思路是什么呢？

面包屑的介紹和實現(xiàn)思路????

首先我們先來了解一下面包屑功能，這個功能其實就是根據(jù)路由的地址，來動態(tài)的生成導(dǎo)航菜單，今后在路由發(fā)生變化的時候，這個導(dǎo)航菜單也會動態(tài)的發(fā)生變化，就像下面展示的這樣：

那么像這樣的功能我們該如何實現(xiàn)呢？

對于這個面包屑來說，他的靜態(tài)版本我們可以直接在element-plus上面直接復(fù)制粘貼即可，這個不做過多的贅述

我們要實現(xiàn)的版本是動態(tài)的進(jìn)行渲染，那么這個就需要我們獲取相應(yīng)路由的數(shù)據(jù)結(jié)構(gòu)（比如說數(shù)組），該如何獲取相應(yīng)的路由數(shù)據(jù)呢？

因此完成面包屑組件的關(guān)鍵就是在于獲取相應(yīng)路由數(shù)據(jù)上面，這就是典型的數(shù)據(jù)驅(qū)動

獲取路由數(shù)據(jù)????

我們要實現(xiàn)這個功能就需要用到route.matched，代碼如下

//首先實例化獲取當(dāng)前路由
const route=useRoute()
//然后調(diào)用route.matched

對route.matched的理解

首先我們來看官方給出的解釋：

官方解釋： 與給定路由地址匹配的標(biāo)準(zhǔn)化的路由記錄數(shù)組。

個人理解：我個人的理解就是從根據(jù)你訪問的路由，然后向上找，找到當(dāng)前路由的根路由然后返回一個數(shù)組，這個數(shù)組包含的就是你當(dāng)前訪問的路由加上根路由，可能這么說你還是不是很理解，那么我就舉一個例子：

const router=[{
 ?path: "/user",
 ?component: Layout
 ?children: [
 ?  {path: "/user/manage", component:Manage },
 ?  {path: "/user/info/:id", component:userInfo ? },
 ?  {path: "/user/import", ?component:import  },
  ],
}]

這里不做路由的細(xì)節(jié)展示，只是為了說明一個例子，如果我們訪問/user/manage這個地址的時候，此時如果我們使用route.matched打印結(jié)果會得到如下結(jié)果：

[  { path: '/user', component: Layout，children:[...所有的子路由] },
  { path: '/user/manage', component: Manage }
]

這樣我們就能根據(jù)獲取的數(shù)組來進(jìn)行面包屑的渲染了。

開始完成動態(tài)面包屑????

在進(jìn)行完前期的鋪墊之后，我們就可以開始完成動態(tài)的面包屑了

封裝面包屑組件：

我們查看element-plus官網(wǎng)的相關(guān)信息之后，發(fā)現(xiàn)要實現(xiàn)面包屑的功能需要使用這兩個組件

el-breadcrumb用來包裹所有子項
el-breadcrumb-item這是每個子項

廢話不多說直接展示源碼：

首先是布局部分

<template>
 ?<div>
 ? ?<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>
 ?</div>
</template>

第一部分的代碼就是根據(jù)獲取的路由數(shù)據(jù)進(jìn)行面包屑的渲染，使用了v-for來進(jìn)行el-breadcrumb-item的渲染，我們在這里規(guī)定了數(shù)組的最后一項是不可被點擊的，并且給它指定了樣式，然后其他項就可以被點擊，并且綁定了點擊事件，將渲染的item傳遞過去，我們重點來講解一下js這部分的代碼。

js部分的代碼：

<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
const route = useRoute();
const router = useRouter();
// 生成數(shù)組數(shù)據(jù)
const breadcrumbData = ref([]);
const getBreadcrumbData = () => {
 ?console.log(route.matched);
 ?breadcrumbData.value = route.matched.filter((item) => {
 ? ?return item.meta && item.meta.title;
  });
};
// 監(jiān)聽路由發(fā)生改變時觸發(fā)
watch(
 ?route,
  () => {
 ? ?getBreadcrumbData();
  },
  {
 ? ?immediate: true,
  }
);
// 處理點擊事件
const onLinkClick = (item) => {
 ?router.push(item.path);
};
// 如果將來需要進(jìn)行主題替換，所以這里獲取下動態(tài)樣式
const store = useStore();
// eslint-disable-next-line
const linkHoverColor = ref(store.getters.globalCss.breadCrumbColor);
</script>

首先我們先定義了一個數(shù)組，這個數(shù)組用來保存要渲染的面包屑數(shù)據(jù)項

接著我們定義了一個函數(shù)，這個函數(shù)是為了獲取當(dāng)前的路由項和在與給定路由匹配的根路由和這個路由，然后過濾一下數(shù)據(jù)項，根據(jù)數(shù)據(jù)項中是否有title和meta對象來過濾數(shù)據(jù)，最終返回一個數(shù)組，里面就是面包屑要展示的數(shù)據(jù)，其實和側(cè)邊欄數(shù)據(jù)是對應(yīng)的
我們這里還是用了watch來監(jiān)測route的數(shù)據(jù)的變化，每當(dāng)數(shù)據(jù)發(fā)生變化時候就調(diào)用getBreadcrumbData這個方法，重新給數(shù)組賦值
緊接著我定義了一個點擊事件，每當(dāng)用戶點擊之后相應(yīng)的子項的時候，我們就會跳轉(zhuǎn)到相應(yīng)的頁面。
我們這里還是使用vuex，這個是為了之后項目可能會使用全局更換顏色（換膚功能），所以這里使用了全局的數(shù)據(jù)共享，根據(jù)Vue3新增的特性，我們可以在css中使用這個變量，當(dāng)vuex中的數(shù)據(jù)改變，那么樣式就會進(jìn)行相應(yīng)改變。

動畫樣式的完成

.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;
}

基本的樣式的完成：

.breadcrumb {
 ?display: flex;
 ?font-size: 14px;
 ?line-height: 50px;
 ?margin-left: 8px;
 ?.no-redirect {
 ? ?color: #97a8be;
 ? ?cursor: text;
  }
 ?.redirect {
 ? ?color: #666;
 ? ?font-weight: 600;
  }
 ?.redirect:hover {
 ? ?// 將來需要進(jìn)行主題替換，所以這里不去寫死樣式，這個是vue3的新增特性
 ? ?color: v-bind(linkHoverColor);
  }
}

到這一步我們的面包屑功能就算完成了，具體的演示我在一開始就進(jìn)行了，大家可以參考我的代碼進(jìn)行實現(xiàn)。