编程 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中使用Ajax获取JSON格式数据示例代码

Nov 26 Javascript

jQuery淡入淡出元素让其效果更为生动

Sep 01 Javascript

jQuery中serializeArray()与serialize()的区别实例分析

Dec 09 Javascript

JavaScript 对象字面量讲解

Jun 06 Javascript

angularjs+bootstrap菜单的使用示例代码

Mar 07 Javascript

Bootstrap媒体对象学习使用

Mar 07 Javascript

原生JS实现圆环拖拽效果

Apr 07 Javascript

angular 实现的输入框数字千分位及保留几位小数点功能示例

Jun 19 Javascript

vue.js实现回到顶部动画效果

Jul 31 Javascript

JavaScript Canvas编写炫彩的网页时钟

Oct 16 Javascript

微信小程序实现滚动Tab选项卡

Nov 16 Javascript

element中Steps步骤条和Tabs标签页关联的解决

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

完美解决dedecms中的[html][/html]和[code][/code]问题

2007/03/20 PHP

Thinkphp模板中使用自定义函数的方法

2012/09/23 PHP

PHP冒泡算法详解（递归实现）

2014/11/10 PHP

php工具型代码之印章抠图

2018/07/18 PHP

Laravel 之url参数,获取路由参数的例子

2019/10/21 PHP

JavaScript脚本性能的优化方法

2007/02/02 Javascript

Extjs学习过程中新手容易碰到的低级错误积累

2010/02/11 Javascript

基于jquery实现的类似百度搜索的输入框自动完成功能

2011/08/23 Javascript

详解javascript事件冒泡

2016/01/09 Javascript

基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理

2016/05/12 Javascript

原生js实现网易轮播图效果

2020/04/10 Javascript

jquery实现文本框的禁用和启用

2016/12/07 Javascript

Vue.js学习教程之列表渲染详解

2017/05/17 Javascript

JavaScript设计模式之调停者模式实例详解

2018/02/03 Javascript

详解Element 指令clickoutside源码分析

2019/02/15 Javascript

JavaScript中关于base64的一些事

2019/05/06 Javascript

python实现SMTP邮件发送功能

2020/06/16 Python

Django之模型层多表操作的实现

2019/01/08 Python

Python对接 xray 和微信实现自动告警

2019/09/17 Python

Python input函数使用实例解析

2019/11/22 Python

jupyter lab文件导出/下载方式

2020/04/22 Python

基于python实现对文件进行切分行

2020/04/26 Python

玉兰油美国官网：OLAY美国

2018/10/25 全球购物

商场中秋节活动方案

2014/02/07 职场文书

政法学院毕业生求职信

2014/02/28 职场文书

平面设计专业大学生职业规划书

2014/03/12 职场文书

《草原的早晨》教学反思

2014/04/08 职场文书

区级文明单位申报材料

2014/05/15 职场文书

优秀班主任材料

2014/12/16 职场文书

简历中自我评价范文

2015/03/11 职场文书

2015年小学数学教研组工作总结

2015/05/21 职场文书

观看焦裕禄观后感

2015/06/09 职场文书

2015年政治教研组工作总结

2015/07/22 职场文书

停车场管理制度范本

2015/08/05 职场文书

信息技术课教学反思

2016/02/23 职场文书

springboot + mongodb 通过经纬度坐标匹配平面区域的方法

2021/11/01 MongoDB