编程 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中的.bind()、.live()和.delegate()之间区别分析

Jun 08 Javascript

jQuery$命名冲突怎么办如何解决

Jan 16 Javascript

深入探讨JavaScript String对象

Mar 09 Javascript

JavaScript中的函数嵌套使用

Jun 04 Javascript

使用CDN和AJAX加速WordPress中jQuery的加载

Dec 05 Javascript

JavaScript中定时控制Throttle、Debounce和Immediate详解

Nov 17 Javascript

vue-router的HTML5 History 模式设置

Sep 08 Javascript

在Angular中使用JWT认证方法示例

Sep 10 Javascript

Bootstrap4 gulp 配置详解

Jan 06 Javascript

node.js使用stream模块实现自定义流示例

Feb 13 Javascript

es6数组的flat()，flatMap()函数用法实例分析

Apr 18 Javascript

JQuery通过键盘控制键盘按下与松开触发事件

Aug 07 jQuery

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请求与Ajax跨域问题

2017/02/13 PHP

php求数组全排列,元素所有组合的方法总结

2017/03/14 PHP

php中文乱码问题的终极解决方案汇总

2017/08/01 PHP

Yii2框架可逆加密简单实现方法

2017/08/25 PHP

PHP连续签到功能实现方法详解

2019/12/04 PHP

ASP.NET中基于JQUERY的高性能的TreeView补充

2011/02/23 Javascript

js判断是否为数组的函数: isArray()

2011/10/30 Javascript

jquery中使用ajax获取远程页面信息

2011/11/13 Javascript

基于javascript、ajax、memcache和PHP实现的简易在线聊天室

2015/02/03 Javascript

JQuery 的跨域方法推荐_可跨任何网站

2016/05/18 Javascript

JavaScript实现移动端滑动选择日期功能

2016/06/21 Javascript

深入浅析AngularJS中的一次性数据绑定 (bindonce)

2017/05/11 Javascript

基于Bootstrap table组件实现多层表头的实例代码

2017/09/07 Javascript

基于vue-simplemde实现图片拖拽、粘贴功能

2018/04/12 Javascript

vue组件横向树实现代码

2018/08/02 Javascript

vue移动端微信授权登录插件封装的实例

2018/08/28 Javascript

如何写好一个vue组件,老夫的一年经验全在这了（推荐）

2019/05/18 Javascript

ES6中定义类和对象的方法示例

2019/07/31 Javascript

Vue包大小优化的实现(从1.72M到94K)

2021/02/18 Vue.js

Python使用函数默认值实现函数静态变量的方法

2014/08/18 Python

Flask模拟实现CSRF攻击的方法

2018/07/24 Python

python绘制简单彩虹图

2018/11/19 Python

Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能

2018/11/23 Python

Python批量生成特定尺寸图片及图画任意文字的实例

2019/01/30 Python

Python解析多帧dicom数据详解

2020/01/13 Python

屏蔽Django admin界面添加按钮的操作

2020/03/11 Python

HTML5如何使用SVG的方法示例

2019/01/11 HTML / CSS

皇家道尔顿官网：Royal Doulton

2017/12/06 全球购物

Funko官方商店：源自美国，畅销全球搪胶收藏玩偶

2018/09/15 全球购物

Tessabit美国：集世界奢侈品和设计师品牌的意大利精品买手店

2020/06/29 全球购物

小学教师评语大全

2014/04/23 职场文书

汽车质检员岗位职责

2015/04/08 职场文书

Mysql MVCC机制原理详解

2021/04/20 MySQL

Javascript之datagrid查询详解

2021/09/15 Javascript

浅谈css实现背景颜色半透明的两种方法

2021/12/06 HTML / CSS

使用Redis实现点赞取消点赞的详细代码

2022/03/20 Redis