Vue3+Elementplus实现面包屑功能
作者：知识浅谈
这篇文章主要为大家详细介绍了Vue3如何结合Elementplus实现面包屑功能,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考下
Vue3+Elementplus引入面包屑功能总结
面包屑（Breadcrumb）是网站或应用程序界面中的一种导航辅助工具，通常以层次结构显示用户当前所在位置的路径。Element Plus 是一个基于 Vue.js 的 UI 组件库，在实现面包屑功能时，可以通过 Element Plus 提供的 Breadcrumb 组件来实现。
在 Element Plus 中使用面包屑功能，首先需要安装并引入 Element Plus 的相关组件。然后，可以通过以下步骤来实现面包屑功能 正菜来了
路由内的内容
因为面包屑是根据路由的内容来显示的
{
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) => { //监听路由路径是否发生变化，之后更改面包屑
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获取访问网址在路由中的路径，并过滤掉item没有title的元素，因为需要用title填充面包屑的内容
let getMatched=()=>{
console.log(route.matched); //打印路径数组
breadList.value = route.matched.filter(item => item.meta && item.meta.title);
}
第 3 步：页面加载时调用获取路径形成面包屑
onMounted(()=>{
getMatched();
})
第 4 步 ：监听路由发生变化面包屑进行相应的修改
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 组件上添加一个标识，表示当前所在位置。
通过以上组件和方法的组合使用，可以实现基本的面包屑功能。
以上就是Vue3+Elementplus实现面包屑功能的详细内容，更多关于Vue3 Elementplus面包屑的资料请关注脚本之家其它相关文章！