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

namespace.js Javascript的命名空间库

Oct 11 Javascript

关于URL中的特殊符号使用介绍

Nov 03 Javascript

javascript如何动态加载表格与动态添加表格行

Nov 27 Javascript

JavaScript设计模式之建造者模式介绍

Dec 28 Javascript

TypeScript 中接口详解

Jun 19 Javascript

谈谈encodeURI和encodeURIComponent以及escape的区别与应用

Nov 24 Javascript

RequireJS多页面应用实例分析

Jun 29 Javascript

AngularJs directive详解及示例代码

Sep 01 Javascript

JavaScript算法系列之快速排序（Quicksort）算法实例详解

Sep 04 Javascript

angular2 ng2 @input和@output理解及示例

Oct 10 Javascript

Angular5.0 子组件通过service传递值给父组件的方法

Jul 13 Javascript

在vue和element-ui的table中实现分页复选功能

Dec 04 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中substr()与explode()函数用法分析

2014/11/24 PHP

PHP实现抓取Google IP并自动修改hosts文件

2015/02/12 PHP

php简单统计字符串单词数量的方法

2015/06/19 PHP

fsockopen pfsockopen函数被禁用，SMTP发送邮件不正常的解决方法

2015/09/20 PHP

ThinkPHP在Cli模式下使用模板引擎的方法

2015/09/25 PHP

Yii框架上传图片用法总结

2016/03/28 PHP

Thinkphp5+Redis实现商品秒杀代码实例讲解

2020/12/29 PHP

学习ExtJS fit布局使用说明

2009/10/08 Javascript

动态创建样式表在各浏览器中的差异测试代码

2011/09/13 Javascript

jQuery 的全选(全非选)即取得被选中的值使用介绍

2013/11/12 Javascript

js判断IE浏览器版本过低示例代码

2013/11/22 Javascript

使用jQuery获取data-的自定义属性

2015/11/10 Javascript

一篇文章掌握RequireJS常用知识

2016/01/26 Javascript

JS常用字符串方法(推荐)

2021/01/15 Javascript

Nodejs--post的公式详解

2017/04/29 NodeJs

Angular中封装fancyBox(图片预览)遇到问题小结

2017/09/01 Javascript

微信小程序动画的简单实例

2017/10/12 Javascript

JavaScript常见事件对象与操作实例总结

2019/01/05 Javascript

如何解决.vue文件url引用文件的问题

2019/01/18 Javascript

小程序转发探索示例

2019/02/19 Javascript

webpack4 optimization使用总结

2019/11/10 Javascript

JS实现audio音频剪裁剪切复制播放与上传(步骤详解)

2020/07/28 Javascript

vue 遮罩层阻止默认滚动事件操作

2020/07/28 Javascript

Python3 操作符重载方法示例

2017/11/23 Python

Django开发中的日志输出的方法

2018/07/02 Python

对Python w和w+权限的区别详解

2019/01/23 Python

pandas按照列的值排序(某一列或者多列)

2020/12/13 Python

Sneaker Studio捷克：购买运动鞋

2018/07/08 全球购物

商超业务员岗位职责

2014/03/12 职场文书

初中生操行评语大全

2014/04/24 职场文书

党员廉洁自律承诺书

2014/05/26 职场文书

重点工程汇报材料

2014/08/27 职场文书

大学生实习证明范文（5篇）

2014/09/18 职场文书

狮子林导游词

2015/02/03 职场文书

2015年技术工作总结范文

2015/04/20 职场文书

MySQL数据库优化之通过索引解决SQL性能问题

2022/04/10 MySQL