【区分vue2和vue3下的element UI Breadcrumb 面包屑组件，分别详细介绍属性，事件，方法如何使用，并举例】

最新推荐文章于 2025-05-16 06:03:14 发布

原创

最新推荐文章于 2025-05-16 06:03:14 发布 · 894 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #前端

在 Vue 2 中，Element UI 提供了 el-breadcrumb 面包屑组件，而在 Vue 3 中，Element UI 的官方版本并没有直接更新以支持 Vue 3，但有一个类似的库叫做 Element Plus，它是为 Vue 3 设计的。

Vue 2 + Element UI

在 Vue 2 的 Element UI 中，el-breadcrumb 组件用于显示当前页面的路径，以面包屑的形式。

属性（Props）

separator：分隔符，默认为斜杠 /。
separator-class：分隔符的类名。

事件（Events）

el-breadcrumb 组件在 Element UI 中并没有定义特定的事件。

示例

<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/about' }">关于我们</el-breadcrumb-item>
    <el-breadcrumb-item>联系我们</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  // ...
};
</s