Element Breadcrumb 面包屑的使用方法


Posted in Javascript onJuly 26, 2020

组件— 面包屑

什么是面包屑导航

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

Element Breadcrumb 面包屑的使用方法

上面这个图表示我们当前的页面是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 面包屑内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
js静态作用域的功能。
Dec 25 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jQuery.each使用详解
Jul 07 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
Vue.js系列之项目结构说明(2)
Jan 03 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
Angularjs之ngModel中的值验证绑定方法
Sep 13 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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 switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
PHP中模拟链表和链表的基本操作示例
2016/02/27 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
php中引用&amp;的用法分析【变量引用,函数引用,对象引用】
2016/12/12 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
JSON JQUERY模板实现说明
2010/07/03 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
关于图片的预加载过程中隐藏未知的
2012/12/19 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
[52:40]完美世界DOTA2联赛PWL S2 Magma vs GXR 第一场 11.29
2020/12/02 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
TensorFlow损失函数专题详解
2018/04/26 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
商场活动策划方案
2014/01/24 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
我的中国梦演讲稿初中篇
2014/08/19 职场文书
2014年教研组工作总结
2014/11/26 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
Python中使用ipython的详细教程
2021/06/22 Python
PHP获取学生成绩的方法
2021/11/17 PHP