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

Code：loadScript( )加载js的功能函数

Feb 02 Javascript

javascript中的prototype属性使用说明(函数功能扩展)

Aug 16 Javascript

jQuery EasyUI API 中文文档搜索框

Sep 29 Javascript

Jquery遍历节点的方法小集

Jan 22 Javascript

vue-cli配置文件——config篇

Jan 04 Javascript

JS设计模式之访问者模式定义与用法分析

Feb 05 Javascript

mpvue将vue项目转换为小程序

Sep 30 Javascript

使用gulp构建前端自动化的方法示例

Dec 25 Javascript

深入了解JavaScript代码覆盖

Jun 13 Javascript

js微信分享接口调用详解

Jul 23 Javascript

JS中的算法与数据结构之集合(Set)实例详解

Aug 20 Javascript

将Vue组件库更换为按需加载的方法步骤

May 06 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之第六天

2006/10/09 PHP

解析coreseek for sphinx的使用

2013/06/21 PHP

PHP ignore_user_abort函数详细介绍和使用实例

2014/07/15 PHP

完美解决Thinkphp3.2中插入相同数据的问题

2017/08/01 PHP

laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子

2019/11/14 PHP

JavaScript 用cloneNode方法克隆节点的代码

2012/10/15 Javascript

JQuery为页面Dom元素绑定事件及解除绑定方法

2014/04/23 Javascript

JS不能跨域借助jquery获取IP地址的方法

2014/08/20 Javascript

js阻止事件追加的具体实现

2014/10/15 Javascript

js与jquery回车提交的方法

2015/02/03 Javascript

JQuery实现动态添加删除评论的方法

2015/05/18 Javascript

javascript嵌套函数和在函数内调用外部函数的区别分析

2016/01/31 Javascript

javascript鼠标右键菜单自定义效果

2020/12/08 Javascript

js字符串截取函数slice、substring和substr的比较

2016/05/17 Javascript

js实现精确到秒的倒计时效果

2016/05/29 Javascript

jq给页面添加覆盖层遮罩的实例

2017/02/16 Javascript

微信小程序之判断页面滚动方向的示例代码

2018/08/30 Javascript

Vue中Quill富文本编辑器的使用教程

2018/09/21 Javascript

[00:32]2018DOTA2亚洲邀请赛Mineski出场

2018/04/04 DOTA

讲解Python中for循环下的索引变量的作用域

2015/04/15 Python

python实现梯度下降算法

2020/03/24 Python

python实现字符串中字符分类及个数统计

2018/09/28 Python

python爬虫 urllib模块反爬虫机制UA详解

2019/08/20 Python

.dcm格式文件软件读取及python处理详解

2020/01/16 Python

python实现三壶谜题的示例详解

2020/11/02 Python

CSS3的transition和animation的用法实例介绍

2014/08/20 HTML / CSS

瑞贝卡·明可弗包包官网：Rebecca Minkoff

2016/07/21 全球购物

介绍下Java的输入输出流

2014/01/22 面试题

后勤岗位职责

2013/11/26 职场文书

酒店总经理工作职责

2013/12/13 职场文书

初中英语课后反思

2014/04/25 职场文书

学生保证书

2015/01/16 职场文书

关于应聘教师的自荐信

2016/01/28 职场文书

如何利用Python实现一个论文降重工具

2021/07/09 Python

MySQL去除重叠时间求时间差和的实现

2021/08/23 MySQL

分享Python获取本机IP地址的几种方法

2022/03/17 Python