一，代码:
官方文档地址：
https://element-plus.gitee.io/zh-CN/component/breadcrumb.html代码:
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<template><div style="width: 100%;min-height: 100vh;"> <HeaderDiv /> <div style="width:100%;height: 40px; background: linear-gradient(to bottom,rgb(247, 247, 247),rgb(251,251,251));" v-if="path != '/index/home'"> <el-breadcrumb class="breadcrumb" :separator-icon="ArrowRight" style="line-height: 40px;margin-left: 20px;"> <transition-group name="breadcrumb"> <el-breadcrumb-item > <div style="width:20px;height:40px;"> <svg style="padding-top:10px;" t="1690610257275" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2375" width="20" height="20"><path d="M96 480c-9.6 0-19.2-3.2-25.6-12.8-12.8-12.8-9.6-35.2 3.2-44.8l377.6-310.4c35.2-25.6 86.4-25.6 118.4 0l377.6 307.2c12.8 9.6 16 32 3.2 44.8-12.8 12.8-32 16-44.8 3.2L531.2 166.4c-9.6-6.4-28.8-6.4-38.4 0L115.2 473.6c-6.4 6.4-12.8 6.4-19.2 6.4zM816 928H608c-19.2 0-32-12.8-32-32v-150.4c0-22.4-38.4-44.8-67.2-44.8-28.8 0-64 19.2-64 44.8V896c0 19.2-12.8 32-32 32H211.2C163.2 928 128 892.8 128 848V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304c0 9.6 6.4 16 19.2 16H384v-118.4c0-64 67.2-108.8 128-108.8s131.2 44.8 131.2 108.8V864h176c9.6 0 16 0 16-19.2V544c0-19.2 12.8-32 32-32s32 12.8 32 32v304C896 896 864 928 816 928z" fill="#51873F" p-id="2376"></path></svg> </div> </el-breadcrumb-item> <el-breadcrumb-item v-for="(item) in matched" :key="item.path" >{{ item.meta.title }}</el-breadcrumb-item> </transition-group> </el-breadcrumb> </div> <router-view style="min-height: calc(100vh - 124px);" /> <Footer style="overflow: hidden;" /></div></template><script>import { ArrowRight } from '@element-plus/icons-vue'import HeaderDiv from "../components/header/Header.vue"import Footer from "../components/footer/Footer";import {useRoute,useRouter } from "vue-router";import {ref,watch,computed} from "vue";export default { name: "IndexView", components: { HeaderDiv, Footer, }, setup() { //得到router const router = useRouter(); //当前路由，用来判断是否首页 const path = ref(''); path.value = router.currentRoute.value.path; //得到当前的路由路径 const matched = computed(() => router.currentRoute.value.matched); //得到route const route = useRoute(); //监控路由变化 watch(() => route.path,(newPath, oldPath) => { console.log("路由变动"); console.log(newPath); path.value = newPath; console.log(oldPath); },{ immediate: true }); return { matched, ArrowRight, path, } }}</script><style scoped>.el-breadcrumb::after, .el-breadcrumb::before { display: none; content: "";}/* 面包屑动画*/.breadcrumb-enter-active { transition: all 0.5s;}.breadcrumb-enter-from, .breadcrumb-leave-active { opacity: 0; transform: translateX(30px) skewX(-50deg);}</style> |
二，显示效果:
说明：刘宏缔的架构森林—专注it技术的博客，
网站：https://blog.imgtouch.com
原文: https://blog.imgtouch.com/index.php/2023/07/29/vue-js-yong-elbreadcrumb-xian-shi-dang-qian-lu-you-vue-3-2-36-elementplus-2-2-2/
代码: https://github.com/liuhongdi/ 或 https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com
三，查看vue.js和element-plus的版本:
vue.js
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue
imgtouch@0.1.0 /data/vue/imgtouch
└─┬ vue@3.2.36
└─┬ @vue/server-renderer@3.2.36
└── vue@3.2.36 dedupedelement-plus
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list element-plus
imgtouch@0.1.0 /data/vue/imgtouch
└── element-plus@2.2.2