在 Element-React 中，使用 Breadcrumb 组件可以实现页面的导航面包屑效果。以下是一个简单的例子，演示如何在 Element-React 中使用 Breadcrumb：
首先，确保你已经引入了 Element-React 的样式和脚本。可以通过以下方式之一来引入：
1. 使用 CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 使用 npm 安装：
npm install element-ui
然后在你的 Vue 项目中引入并使用 Breadcrumb 组件：
<template>
<div>
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
import { ElBreadcrumb, ElBreadcrumbItem } from 'element-ui';
export default {
components: {
ElBreadcrumb,
ElBreadcrumbItem
}
}
</script>
在上面的例子中，我们通过<el-breadcrumb>和<el-breadcrumb-item>来构建面包屑导航。每个<el-breadcrumb-item>表示一个导航项，你可以根据你的页面结构和路由进行动态的生成和展示。在这个例子中，我们使用了简单的文字作为导航项的内容，你也可以根据需要添加链接等其他内容。
转载请注明出处：http://www.zyzy.cn/article/detail/5629/Element-React