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

用Javascript读取中文COOKIE的解决办法

Feb 15 Javascript

node.js中的fs.link方法使用说明

Dec 15 Javascript

写给小白的JavaScript引擎指南

Dec 04 Javascript

一种Javascript解释ajax返回的json的好方法(推荐)

Jun 02 Javascript

JS & JQuery 动态添加 select option

Jun 08 Javascript

关于JS 预解释的相关理解

Jun 28 Javascript

jQuery实现的购物车物品数量加减功能代码

Nov 16 Javascript

vue实现条件判断动态绑定样式的方法

Sep 29 Javascript

使用rollup打包JS的方法步骤

Dec 05 Javascript

微信小程序使用setData修改数组中单个对象的方法分析

Dec 30 Javascript

微信小程序-API接口安全详解

Jul 16 Javascript

在vue中使用el-tab-pane v-show/v-if无效的解决

Aug 03 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

大师制作的中短波矿石收音机

2020/04/02 无线电

《PHP编程最快明白》第三讲：php数组

2010/11/01 PHP

Yii框架关联查询with用法分析

2014/12/02 PHP

PHP实现简单爬虫的方法

2015/07/29 PHP

php实现基于PDO的预处理示例

2017/03/28 PHP

php设计模式之享元模式分析【星际争霸游戏案例】

2020/03/23 PHP

解析JavaScript中instanceof对于不同的构造器或许都返回true

2013/12/03 Javascript

基于jquery的手风琴图片展示效果实现方法

2014/12/16 Javascript

jQuery基础知识小结

2014/12/22 Javascript

a标签跳转到指定div,jquery添加和移除class属性的实现方法

2016/10/10 Javascript

javascript中的后退和刷新实现方法

2016/11/10 Javascript

JS实现的表头列头固定页面功能示例

2017/01/10 Javascript

JS 实现随机验证码功能

2017/02/15 Javascript

自制简易打赏功能的实例

2017/09/02 Javascript

React Native中TabBarIOS的简单使用方法示例

2017/10/13 Javascript

vue.js中实现登录控制的方法示例

2018/04/23 Javascript

vue组件间的参数传递实例详解

2019/04/26 Javascript

vue cli 3.0 搭建项目的图文教程

2019/05/17 Javascript

Vue项目中ESlint规范示例代码

2019/07/04 Javascript

python中split方法用法分析

2015/04/17 Python

在SAE上部署Python的Django框架的一些问题汇总

2015/05/30 Python

Python利用带权重随机数解决抽奖和游戏爆装备问题

2016/06/16 Python

Pandas 数据框增、删、改、查、去重、抽样基本操作方法

2018/04/12 Python

基于python进行桶排序与基数排序的总结

2018/05/29 Python

python实现自动获取IP并发送到邮箱

2018/12/26 Python

Python 一句话生成字母表的方法

2019/01/02 Python

python GUI图形化编程wxpython的使用

2019/07/19 Python

Django自定义模板过滤器和标签的实现方法

2019/08/21 Python

Python实现Kerberos用户的增删改查操作

2020/12/14 Python

美国在线乐器和设备商店：Musician’s Friend

2018/07/06 全球购物

Charles & Colvard官网：美国莫桑石品牌

2019/06/05 全球购物

String是最基本的数据类型吗？

2013/06/13 面试题

《庐山的云雾》教学反思

2014/04/22 职场文书

2014年教研活动总结范文

2014/04/26 职场文书

小学班主任心得体会

2016/01/07 职场文书

Spring中bean集合注入的方法详解

2022/07/07 Java/Android