526互联

vue.js:用el-breadcrumb显示当前路由(vue@3.2.36/element-plus@2.2.2)

发布时间 2023-07-31 21:00:04作者: 刘宏缔的架构森林

一，代码:

官方文档地址：

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 deduped

element-plus

liuhongdi@lhdpc:/data/vue/imgtouch$ npm list element-plus
imgtouch@0.1.0 /data/vue/imgtouch
└── element-plus@2.2.2