编程 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 相关文章推荐

Javascript代码在页面加载时的执行顺序介绍

May 03 Javascript

JQuery异步获取返回值中文乱码的解决方法

Jan 29 Javascript

js兼容火狐显示上传图片预览效果的方法

May 21 Javascript

JavaScript事件学习小结（三）js事件对象

Jun 09 Javascript

原生js实现日期计算器功能

Feb 17 Javascript

js浏览器滚动条卷去的高度scrolltop(实例讲解)

Jul 07 Javascript

微信小程序之圆形进度条实现思路

Feb 22 Javascript

浅析node应用的timing-attack安全漏洞

Feb 28 Javascript

基于AngularJs select绑定数字类型的问题

Oct 08 Javascript

JS实现数组去重,显示重复元素及个数的方法示例

Jan 21 Javascript

微信小程序全局变量功能与用法详解

Jan 22 Javascript

微信小程序实现左滑动删除效果

Mar 30 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＋AJAX实现无刷新注册（带用户名实时检测）

2007/01/02 PHP

Ha0k 0.3 PHP 网页木马修改版

2009/10/11 PHP

php 批量添加多行文本框textarea一行一个

2014/06/03 PHP

php实现处理输入转义字符的代码

2015/11/08 PHP

PHP设计模式之迭代器模式

2016/06/17 PHP

[原创]php实现数组按拼音顺序排序的方法

2017/05/03 PHP

php empty 函数判断结果为空但实际值却为非空的原因解析

2018/05/28 PHP

JavaScript中的prototype使用说明

2010/04/13 Javascript

JS验证邮箱格式是否正确的代码

2013/12/05 Javascript

js setTimeout()函数介绍及应用以倒计时为例

2013/12/12 Javascript

Jquery下EasyUI组件中的DataGrid结果集清空方法

2014/01/06 Javascript

javascript对象的使用和属性操作示例详解

2014/03/02 Javascript

使用纯javascript实现经典扫雷游戏

2015/04/23 Javascript

微信企业号开发之微信考勤百度地图定位

2015/09/11 Javascript

json格式数据的添加，删除及排序方法

2016/01/21 Javascript

JS实现统计字符串中字符出现个数及最大个数功能示例

2018/06/04 Javascript

JS实现面向对象继承的5种方式分析

2018/07/21 Javascript

用python找出那些被“标记”的照片

2017/04/20 Python

Python编程实现正则删除命令功能

2017/08/30 Python

python使用for循环计算0-100的整数的和方法

2019/02/01 Python

python开发入门——列表生成式

2020/09/03 Python

使用Python快速打开一个百万行级别的超大Excel文件的方法

2021/03/02 Python

Woolworth官网：澳洲第一大超市

2017/06/25 全球购物

CheapTickets泰国：廉价航班，查看促销价格并预订机票

2019/12/28 全球购物

adidas马来西亚官网：adidas MY

2020/09/12 全球购物

Feelunique中文官网：欧洲最大化妆品零售电商

2020/07/10 全球购物

办公室副主任岗位职责

2013/11/25 职场文书

家具厂厂长岗位职责

2014/01/01 职场文书

养殖行业的创业计划书

2014/01/05 职场文书

党委班子对照检查材料

2014/08/19 职场文书

2014年大学团支部工作总结

2014/12/02 职场文书

销售口号霸气押韵

2015/12/24 职场文书

企业内部管理控制：银行存款控制制度范本

2020/01/10 职场文书

nginx处理http请求实现过程解析

2021/03/31 Servers

MySQL数据库任意ip连接方法

2022/05/20 MySQL

VUE递归树形实现多级列表

2022/07/15 Vue.js