编程 Javascript

Element Breadcrumb 面包屑的使用方法

Posted in Javascript onJuly 26, 2020

组件— 面包屑

什么是面包屑导航

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

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

Element Breadcrumb 面包屑的使用方法

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

基础用法

Element Breadcrumb 面包屑的使用方法

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

图标分隔符

Element 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

Element Breadcrumb 面包屑的使用方法

Breadcrumb Item Attributes

Element Breadcrumb 面包屑的使用方法

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

Element Breadcrumb 面包屑的使用方法

- Author -

ForeverJPB.

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

巧妙破除网页右键禁用的十大绝招

Aug 12 Javascript

基于jquery的分页控件(C#)

Jan 06 Javascript

js 中的switch表达式使用示例

Jun 03 Javascript

jQuery实现的简单百分比进度条效果示例

Aug 01 Javascript

微信小程序Server端环境配置详解（SSL， Nginx HTTPS，TLS 1.2 升级）

Jan 12 Javascript

vue.js学习之UI组件开发教程

Jul 03 Javascript

vue-router 权限控制的示例代码

Sep 21 Javascript

JavaScript实现精美个性导航栏筋斗云效果

Oct 29 Javascript

Bootstrap实现的表格合并单元格示例

Feb 06 Javascript

jQuery实现的简单获取索引功能示例

Jun 04 jQuery

JavaScript动态创建二维数组的方法示例

Feb 01 Javascript

D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)

May 09 Javascript

Element PageHeader页头的使用方法

Jul 26 #Javascript

Element Dropdown下拉菜单的使用方法

Jul 26 #Javascript

Vue中的this.$options.data()和this.$data用法说明

Jul 26 #Javascript

解决vue的router组件component在import时不能使用变量问题

Jul 26 #Javascript

Element Steps步骤条的使用方法

Jul 26 #Javascript

解决vue动态路由异步加载import组件,加载不到module的问题

Jul 26 #Javascript

vue 动态设置img的src地址无效,npm run build 后找不到文件的解决

Jul 26 #Javascript

You might like

深入理解php的MySQL连接类

2013/06/07 PHP

php设置静态内容缓存时间的方法

2014/12/01 PHP

Jquery 组合form元素为json格式,asp.net反序列化

2009/07/09 Javascript

jquery JSON的解析方式

2009/07/25 Javascript

jquery中event对象属性与方法小结

2013/12/18 Javascript

用javascript关闭本窗口技巧小结

2014/09/05 Javascript

浅谈JS中的三种字符串连接方式及其性能比较

2016/09/02 Javascript

浅谈jquery之on()绑定事件和off()解除绑定事件

2016/10/26 Javascript

微信小程序入门教程

2016/11/18 Javascript

jQuery插件Echarts实现的渐变色柱状图

2017/03/23 jQuery

AngularJS 实现点击按钮获取验证码功能实例代码

2017/07/13 Javascript

Angular整合zTree的示例代码

2018/01/24 Javascript

JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例

2018/05/31 jQuery

原生实现一个react-redux的代码示例

2018/06/08 Javascript

详解vue添加删除元素的方法

2018/06/30 Javascript

微信小程序开发的基本流程步骤

2019/01/31 Javascript

微信小程序腾讯地图SDK 获取当前地址实现解析

2019/08/12 Javascript

解决layui数据表格table的横向滚动条显示问题

2019/09/04 Javascript

[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18

2018/08/19 DOTA

[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23

2018/08/24 DOTA

Python读取环境变量的方法和自定义类分享

2014/11/22 Python

在Python程序中操作MySQL的基本方法

2015/07/29 Python

Tornado协程在python2.7如何返回值(实现方法)

2017/06/22 Python

django文档学习之applications使用详解

2018/01/29 Python

python中类的属性和方法介绍

2018/11/27 Python

python交易记录整合交易类详解

2019/07/03 Python

Django项目后台不挂断运行的方法

2019/08/31 Python

Python脚本破解压缩文件口令实例教程(zipfile)

2020/06/14 Python

英国第一家领先的在线处方眼镜零售商：Glasses Direct

2018/02/23 全球购物

小学后勤管理制度

2014/01/14 职场文书

火箭队口号

2014/06/18 职场文书

关于国庆节的演讲稿

2014/09/05 职场文书

小学生勤俭节约倡议书

2015/04/29 职场文书

Python爬虫之爬取某文库文档数据

2021/04/21 Python

Go语言使用select{}阻塞main函数介绍

2021/04/25 Golang

解决python绘图使用subplots出现标题重叠的问题

2021/04/30 Python