快捷導(dǎo)航

Vue3+Elementplus實(shí)現(xiàn)面包屑功能

更新時(shí)間：2023年11月15日 11:02:59 作者：知識(shí)淺談

這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Elementplus實(shí)現(xiàn)面包屑功能,文中的示例代碼簡(jiǎn)潔易懂,具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下

面包屑（Breadcrumb）是網(wǎng)站或應(yīng)用程序界面中的一種導(dǎo)航輔助工具，通常以層次結(jié)構(gòu)顯示用戶(hù)當(dāng)前所在位置的路徑。Element Plus 是一個(gè)基于 Vue.js 的 UI 組件庫(kù)，在實(shí)現(xiàn)面包屑功能時(shí)，可以通過(guò) Element Plus 提供的 Breadcrumb 組件來(lái)實(shí)現(xiàn)。

在 Element Plus 中使用面包屑功能，首先需要安裝并引入 Element Plus 的相關(guān)組件。然后，可以通過(guò)以下步驟來(lái)實(shí)現(xiàn)面包屑功能正菜來(lái)了

路由內(nèi)的內(nèi)容

因?yàn)槊姘际歉鶕?jù)路由的內(nèi)容來(lái)顯示的

{
    path: "/home",
    name: "home",
    // 懶加載
    component: () => import("../views/home/index.vue"),
    meta: {
      title: "主頁(yè)",
    },
    children: [
    {
	    path: "/recruitManage",
	    name: "recruitManage",
	    component: () => import("../views/home/childrens/RecruitManage.vue"),
	    meta: {
	      title: "招聘管理",
	      icon: Guide
	    },
	    children: [
	      {
	        path: "/noticeList",
	        name: "noticeList",
	        // 懶加載
	        component: () => import("../views/home/childrens/NoticeList.vue"),
	        meta: {
	          title: "公告管理"
	        },
	      },
	      {
	        path: "/postList",
	        name: "postList",
	        // 懶加載
	        component: () => import("../views/home/childrens/PostList.vue"),
	        meta: {
	          title: "職位管理",
	        },
	      },
	    ]
  	}
 }

開(kāi)始插入面包屑

溫馨提醒：這個(gè)有點(diǎn)仔細(xì)，請(qǐng)仔細(xì)看下去

 <!-- 面包屑（放到你想要放的template中的位置） -->
<el-breadcrumb separator=">">
     <!-- <el-breadcrumb-item :to="{ path: '/home' }">首頁(yè)</el-breadcrumb-item> -->
     <template v-for="(item, index) in breadList">
       <el-breadcrumb-item
         v-if="item.name"
         :key="index"
         :to="item.path"
       >{{ item.meta.title }}</el-breadcrumb-item>
     </template>
   </el-breadcrumb>

<script setup>
import { useRouter,useRoute } from 'vue-router';

let router = useRouter();
let route = useRoute();

let getMatched=()=>{
  console.log(route.matched);
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
}
onMounted(()=>{
  getMatched();
})

watch(() => route.path, (newValue, oldValue) => { //監(jiān)聽(tīng)路由路徑是否發(fā)生變化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})

</script>

插入內(nèi)容講解

第 1 步:導(dǎo)入route，使用其能訪(fǎng)問(wèn)到路由的路徑

import { useRouter,useRoute } from 'vue-router';

let router = useRouter();
let route = useRoute();

第 2 步：編寫(xiě)獲取路徑的方法 matched獲取訪(fǎng)問(wèn)網(wǎng)址在路由中的路徑，并過(guò)濾掉item沒(méi)有title的元素，因?yàn)樾枰胻itle填充面包屑的內(nèi)容

let getMatched=()=>{
  console.log(route.matched); //打印路徑數(shù)組
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
}

第 3 步：頁(yè)面加載時(shí)調(diào)用獲取路徑形成面包屑

onMounted(()=>{
  getMatched();
})

第 4 步：監(jiān)聽(tīng)路由發(fā)生變化面包屑進(jìn)行相應(yīng)的修改

watch(() => route.path, (newValue, oldValue) => { //監(jiān)聽(tīng)路由路徑是否發(fā)生變化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})

面包屑引入過(guò)程梳理

在 Element Plus 中，面包屑功能主要涉及以下組件和方法：

Breadcrumb 組件：面包屑的容器組件，用于包裹 BreadcrumbItem 組件?？梢酝ㄟ^(guò) separator 屬性設(shè)置面包屑分隔符，默認(rèn)為 /。
BreadcrumbItem 組件：面包屑的項(xiàng)組件，用于表示每個(gè)導(dǎo)航路徑的一部分?？梢酝ㄟ^(guò)插槽（slot）的方式設(shè)置每個(gè)項(xiàng)的內(nèi)容，并通過(guò) to 屬性設(shè)置項(xiàng)的鏈接地址。
面包屑的數(shù)據(jù)源：通常使用一個(gè)數(shù)組來(lái)存儲(chǔ)面包屑的導(dǎo)航路徑信息。每個(gè)導(dǎo)航路徑都是一個(gè)對(duì)象，包含兩個(gè)屬性：text 表示項(xiàng)的文本內(nèi)容，to 表示項(xiàng)的鏈接地址。
動(dòng)態(tài)生成面包屑：根據(jù)頁(yè)面的路由信息或其他需要顯示的路徑信息，動(dòng)態(tài)生成面包屑的數(shù)據(jù)源，然后通過(guò) v-for 指令遍歷數(shù)據(jù)源，動(dòng)態(tài)生成 BreadcrumbItem 組件。
設(shè)置當(dāng)前項(xiàng)：根據(jù)頁(yè)面的當(dāng)前路由信息，在對(duì)應(yīng)的 BreadcrumbItem 組件上添加一個(gè)標(biāo)識(shí)，表示當(dāng)前所在位置。

通過(guò)以上組件和方法的組合使用，可以實(shí)現(xiàn)基本的面包屑功能。

以上就是Vue3+Elementplus實(shí)現(xiàn)面包屑功能的詳細(xì)內(nèi)容，更多關(guān)于Vue3 Elementplus面包屑的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: