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

强制设为首页代码

Jun 19 Javascript

javascript中键盘事件用法实例分析

Jan 30 Javascript

javascript表单事件处理方法详解

May 15 Javascript

jQuery内容过滤选择器用法示例

Sep 09 Javascript

快速解决js开发下拉框中blur与click冲突

Oct 10 Javascript

Vue手把手教你撸一个 beforeEnter 钩子函数

Apr 24 Javascript

vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

Sep 07 Javascript

Vue循环组件加validate多表单验证的实例

Sep 18 Javascript

vue中axios请求的封装实例代码

Mar 23 Javascript

基于vue实现圆形菜单栏组件

Jul 05 Javascript

js 解析 JSON 数据简单示例

Apr 21 Javascript

原生js实现贪吃蛇游戏

Oct 26 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中$this-&gt;含义分析

2009/11/29 PHP

apache mysql php 源码编译使用方法

2012/05/03 PHP

PHP类与对象中的private访问控制的疑问

2012/11/01 PHP

thinkphp四种url访问方式详解

2014/11/28 PHP

Laravel框架路由设置与使用示例

2018/06/12 PHP

基于jquery的划词搜索实现（备忘）

2010/09/14 Javascript

js点击事件链接的问题解决

2014/04/25 Javascript

PassWord输入框代码分享

2016/06/07 Javascript

使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）

2017/01/21 Javascript

jQuery控制元素隐藏和显示

2017/03/03 Javascript

Postman的下载及安装教程详解

2018/10/16 Javascript

小程序云开发初探(小结)

2018/10/24 Javascript

jQuery模仿ToDoList实现简单的待办事项列表

2019/12/30 jQuery

vue项目中在可编辑div光标位置插入内容的实现代码

2020/01/07 Javascript

vue实现日历表格（element-ui）

2020/09/24 Javascript

深入理解python函数递归和生成器

2016/06/06 Python

利用python发送和接收邮件

2016/09/27 Python

python字典一键多值实例代码分享

2019/06/14 Python

python and or用法详解

2019/06/26 Python

浅谈django2.0 ForeignKey参数的变化

2019/08/06 Python

Python视频编辑库MoviePy的使用

2020/04/01 Python

浅析python 动态库m.so.1.0错误问题

2020/05/09 Python

Python几种常见算法汇总

2020/06/02 Python

加拿大女包品牌：Matt & Nat

2017/05/12 全球购物

巴西宠物店在线：Geração Pet

2017/05/31 全球购物

澳大利亚排名第一的在线酒类商店：MyBottleShop

2018/04/26 全球购物

请假条的格式

2014/04/11 职场文书

幼儿园户外活动总结

2014/07/04 职场文书

物联网工程专业推荐信

2014/09/08 职场文书

文明倡议书

2015/01/19 职场文书

无锡灵山大佛导游词

2015/02/09 职场文书

写给孩子的新学期寄语

2015/02/27 职场文书

迎客户欢迎词三篇

2019/09/27 职场文书

SQLServer 日期函数大全(小结)

2021/04/08 SQL Server

使用Oracle跟踪文件的问题详解

2021/06/28 Oracle

一次MySQL启动导致的事故实战记录

2021/09/15 MySQL