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

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

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

面包屑（Breadcrumb）是網(wǎng)站或應用程序界面中的一種導航輔助工具，通常以層次結構顯示用戶當前所在位置的路徑。Element Plus 是一個基于 Vue.js 的 UI 組件庫，在實現(xiàn)面包屑功能時，可以通過 Element Plus 提供的 Breadcrumb 組件來實現(xiàn)。

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

路由內的內容

因為面包屑是根據(jù)路由的內容來顯示的

{
    path: "/home",
    name: "home",
    // 懶加載
    component: () => import("../views/home/index.vue"),
    meta: {
      title: "主頁",
    },
    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: "職位管理",
	        },
	      },
	    ]
  	}
 }

開始插入面包屑

溫馨提醒：這個有點仔細，請仔細看下去

 <!-- 面包屑（放到你想要放的template中的位置） -->
<el-breadcrumb separator=">">
     <!-- <el-breadcrumb-item :to="{ path: '/home' }">首頁</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)聽路由路徑是否發(fā)生變化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})

</script>

插入內容講解

第 1 步:導入route，使用其能訪問到路由的路徑

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

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

第 2 步：編寫獲取路徑的方法 matched獲取訪問網(wǎng)址在路由中的路徑，并過濾掉item沒有title的元素，因為需要用title填充面包屑的內容

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

第 3 步：頁面加載時調用獲取路徑形成面包屑

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

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

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

面包屑引入過程梳理

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

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

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

以上就是Vue3+Elementplus實現(xiàn)面包屑功能的詳細內容，更多關于Vue3 Elementplus面包屑的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: