Vue3+Elementplus引入面包屑功能

🤞Vue3+Elementplus引入面包屑功能总结🤞

面包屑（Breadcrumb）是网站或应用程序界面中的一种导航辅助工具，通常以层次结构显示用户当前所在位置的路径。Element Plus 是一个基于 Vue.js 的 UI 组件库，在实现面包屑功能时，可以通过 Element Plus 提供的 Breadcrumb 组件来实现。

在 Element Plus 中使用面包屑功能，首先需要安装并引入 Element Plus 的相关组件。然后，可以通过以下步骤来实现面包屑功能正菜来了⛳⛳⛳

🎈路由内的内容

因为面包屑是根据路由的内容来显示的

bash 复制代码

{
    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: "职位管理",
	        },
	      },
	    ]
  	}
 }

🎈开始插入面包屑

温馨提醒：这个有点仔细，请仔细看下去

bash 复制代码

 <!-- 面包屑（放到你想要放的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>

bash 复制代码

<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) => { //监听路由路径是否发生变化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})

</script>

🍮插入内容讲解

📐第 1 步:导入route，使用其能访问到路由的路径

bash 复制代码

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

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

📐第 2 步：编写获取路径的方法 matched获取访问网址在路由中的路径，并过滤掉item没有title的元素，因为需要用title填充面包屑的内容

bash 复制代码

let getMatched=()=>{
  console.log(route.matched); //打印路径数组
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
}

📐第 3 步：页面加载时调用获取路径形成面包屑

bash 复制代码

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

📐第 4 步：监听路由发生变化面包屑进行相应的修改

bash 复制代码

watch(() => route.path, (newValue, oldValue) => { //监听路由路径是否发生变化，之后更改面包屑
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
})

🎈面包屑引入过程梳理

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

Breadcrumb 组件：面包屑的容器组件，用于包裹 BreadcrumbItem 组件。可以通过 separator 属性设置面包屑分隔符，默认为 /。
BreadcrumbItem 组件：面包屑的项组件，用于表示每个导航路径的一部分。可以通过插槽（slot）的方式设置每个项的内容，并通过 to 属性设置项的链接地址。
面包屑的数据源：通常使用一个数组来存储面包屑的导航路径信息。每个导航路径都是一个对象，包含两个属性：text 表示项的文本内容，to 表示项的链接地址。
动态生成面包屑：根据页面的路由信息或其他需要显示的路径信息，动态生成面包屑的数据源，然后通过 v-for 指令遍历数据源，动态生成 BreadcrumbItem 组件。
设置当前项：根据页面的当前路由信息，在对应的 BreadcrumbItem 组件上添加一个标识，表示当前所在位置。

通过以上组件和方法的组合使用，可以实现基本的面包屑功能。

🍚总结

大功告成，撒花致谢🎆🎇🌟，关注我不迷路，带你起飞带你富。