Element Breadcrumb 面包屑的使用方法 - CSDN文库

122 浏览量更新于2023-03-16 收藏 73KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

Element Breadcrumb 面包屑的使用方法面包屑的使用方法

主要介绍了Element Breadcrumb 面包屑的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习

学习吧

组件组件— 面包屑面包屑

什么是面包屑导航什么是面包屑导航

一般页面内容上方都会有一个路径导航，这个导航就是面包屑导航。例如：

上面这个图表示我们当前的页面是Breadcrumb面包屑，上一级目录是组件页面，再上一级目录是Element UI页面。当我们点击这些目录时会返回到对应的页面中去。再例如：

上面这个图表示我们当前所在的位置是活动详情页面，上一级目录是活动列表页面…以此类推。

这些就是面包屑导航。

基础用法基础用法

<el-breadcrumb separator="/">

<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

<el-breadcrumb-item><a href="/" rel="external nofollow" >活动管理</a></el-breadcrumb-item>

<el-breadcrumb-item>活动列表</el-breadcrumb-item>

<el-breadcrumb-item>活动详情</el-breadcrumb-item>

</el-breadcrumb>

图标分隔符图标分隔符

<el-breadcrumb separator-class="el-icon-arrow-right">

<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>

Breadcrumb Attributes

Breadcrumb Item Attributes

到此这篇关于Element Breadcrumb 面包屑的使用方法的文章就介绍到这了,更多相关Element Breadcrumb 面包屑内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38670529

粉丝: 3
资源: 928

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈