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

仅仅一月的时间,曾经满眼雪白的棉花地只剩下暗褐色的一片,偶尔星星点点飘几点白色,也暗然无光。人类征服大自然的力量是神奇强大的,这种超乎寻常的功能有时候总让你难以置信。

组件— 面包屑

什么是面包屑导航

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

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

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

基础用法

<el-breadcrumb separator="/">
 <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
 <el-breadcrumb-item><a rel="nofollow noopener noreferrer" 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 面包屑内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

您可能有感兴趣的文章
解读element el-upload上传的附件名称不显示 file-list赋值

element upload 钩子函数的坑及如何解决

一篇关于ElementUI的el-upload组件二次封装的问题

element日历calendar组件上月、今天、下月、日历块点击事件及模板源码

vue+element搭建后台小总结 el-dropdown下拉功能