Vue3+Elementplus引入面包屑功能

🍁 作者：知识浅谈，CSDN博客专家，阿里云签约博主，InfoQ签约博主，华为云云享专家，51CTO明日之星
📌 擅长领域：全栈工程师、爬虫、ACM算法
💒 公众号：知识浅谈
🔥 网站：vip.zsqt.cc

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

正菜来了⛳⛳⛳

🎈路由内的内容

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

{
    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: "职位管理",
	        },
	      },
	    ]
  	}
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

开始插入面包屑🎈

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

 <!-- 面包屑（放到你想要放的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>
1
2
3
4
5
6
7
8
9
10
11

<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

🍮插入内容讲解

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

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

let router = useRouter();
let route = useRoute();
1
2
3
4

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

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

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

onMounted(()=>{
  getMatched();
})
1
2
3

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

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

🍚总结

以上就是面包屑在vue3和elementplus项目中的应用。