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

jQuery + Flex 通过拖拽方式动态改变图片的代码

Aug 03 Javascript

IE8对JS通过属性和数组遍历解析不一样的地方探讨

May 06 Javascript

js设置cookie过期及清除浏览器对应名称的cookie

Oct 24 Javascript

如何在MVC应用程序中使用Jquery

Nov 17 Javascript

jquery队列函数用法实例

Dec 16 Javascript

jQuery使用hide方法隐藏页面上指定元素的方法

Mar 30 Javascript

JavaScript通过代码调用Flash显示的方法

Feb 02 Javascript

JS实现随页面滚动显示/隐藏窗口固定位置元素

Feb 26 Javascript

angularjs中ng-bind-html的用法总结

May 23 Javascript

js实现动态改变radio状态的方法

Feb 28 Javascript

DatePickerDialog 自定义样式及使用全解

Jul 09 Javascript

vue router返回到指定的路由的场景分析

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

thinkphp中连接oracle时封装方法无法用的解决办法

2013/06/17 PHP

php字符编码转换之gb2312转为utf8

2013/10/28 PHP

php的一个简单加密解密代码

2014/01/14 PHP

PHP实现将视频转成MP4并获取视频预览图的方法

2015/03/12 PHP

HTML-CSS群中单选引发的“事件”

2007/03/05 Javascript

javascript firefox兼容ie的dom方法脚本

2008/05/18 Javascript

jquery获取元素索引值index()示例

2014/02/13 Javascript

js获取上传文件大小示例代码

2014/04/10 Javascript

js实现交通灯效果

2017/01/13 Javascript

ES6数组的扩展详解

2017/04/25 Javascript

JS实现json对象数组按对象属性排序操作示例

2018/05/18 Javascript

解决layer弹出层的内容页点击按钮跳转到新的页面问题

2019/09/14 Javascript

详解为element-ui的Select和Cascader添加弹层底部操作按钮

2020/02/07 Javascript

详解vue组件之间的通信

2020/08/30 Javascript

Python的Django框架中的URL配置与松耦合

2015/07/15 Python

Python中Selenium模拟JQuery滑动解锁实例

2017/07/26 Python

快速了解Python相对导入

2018/01/12 Python

numpy.random.seed()的使用实例解析

2018/02/03 Python

Python爬虫爬取新浪微博内容示例【基于代理IP】

2018/08/03 Python

Python Matplotlib 基于networkx画关系网络图

2019/07/10 Python

python经典趣味24点游戏程序设计

2019/07/26 Python

Django对models里的objects的使用详解

2019/08/17 Python

python实现淘宝购物系统

2019/10/25 Python

pygame实现俄罗斯方块游戏（对战篇1）

2019/10/29 Python

Python数据可视化：箱线图多种库画法

2019/11/06 Python

pycharm 2018 激活码及破解补丁激活方式

2020/09/21 Python

墨西哥网上购物：Linio墨西哥

2016/10/20 全球购物

澳大利亚领先的美容护肤品零售商之一：SkincareStore

2018/01/22 全球购物

幼儿园教师辞职信

2014/01/18 职场文书

动漫专业高职生职业生涯规划书

2014/02/15 职场文书

优秀技术工人先进材料

2014/02/17 职场文书

2014年“向国旗敬礼”网上签名寄语活动方案

2014/09/27 职场文书

高中升旗仪式主持词

2015/07/03 职场文书

2016年优秀少先队员事迹材料

2016/02/26 职场文书

2016年圣诞节义工活动总结

2016/04/01 职场文书

Django中celery的使用项目实例

2022/07/07 Python