编程 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的原理和实现技巧介绍

Nov 08 Javascript

javascript操纵OGNL标签示例代码

Jun 16 Javascript

jQuery左侧大图右侧小图焦点图幻灯切换代码分享

Aug 19 Javascript

javascript字符串替换函数如何一次性全部替换掉

Oct 30 Javascript

AngularJS入门教程之Select(选择框)详解

Jul 27 Javascript

js遍历json对象所有key及根据动态key获取值的方法(必看)

Mar 09 Javascript

基于JavaScript实现滑动门效果

Mar 16 Javascript

详解微信小程序的不同函数调用的几种方法

May 08 Javascript

Vue发布项目实例讲解

Jul 17 Javascript

Java Varargs 可变参数用法详解

Jan 28 Javascript

js实现简单进度条效果

Mar 25 Javascript

JS实现联想、自动补齐国家或地区名称的功能

Jul 07 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

Apache, PHP在Windows 9x/NT下的安装与配置 (一)

2006/10/09 PHP

php MYSQL 数据备份类

2009/06/19 PHP

php记录日志的实现代码

2011/08/08 PHP

php 判断服务器操作系统的类型

2014/02/17 PHP

MyEclipse常用配置图文教程

2014/09/11 PHP

Raphael带文本标签可拖动的图形实现代码

2013/02/20 Javascript

JavaScript实现生成GUID（全局统一标识符）

2014/09/05 Javascript

asp知识整理笔记3（问答模式）

2015/09/27 Javascript

jquery获取select选中值的方法分析

2015/12/22 Javascript

详解设置Webstorm 利用babel将ES6自动转码成ES5

2017/12/20 Javascript

jQuery实现定时隐藏对话框的方法分析

2018/02/12 jQuery

微信公众号平台接口开发获取access_token过程解析

2019/08/14 Javascript

swiper4实现移动端导航栏tab滑动切换

2020/10/16 Javascript

[02:16]DOTA2英雄基础教程干扰者

2014/01/15 DOTA

python BeautifulSoup使用方法详解

2013/11/21 Python

Python 多线程抓取图片效率对比

2016/02/27 Python

横向对比分析Python解析XML的四种方式

2016/03/30 Python

Django验证码的生成与使用示例

2017/05/20 Python

Python 由字符串函数名得到对应的函数(实例讲解)

2017/08/10 Python

Python使用回溯法子集树模板获取最长公共子序列（LCS）的方法

2017/09/08 Python

Python3之手动创建迭代器的实例代码

2019/05/22 Python

numpy数组之存取文件的实现示例

2019/05/24 Python

python抓取多种类型的页面方法实例

2019/11/20 Python

Pandas时间序列:重采样及频率转换方式

2019/12/26 Python

Python使用循环神经网络解决文本分类问题的方法详解

2020/01/16 Python

使用Html5实现异步上传文件,支持跨域,带有上传进度条

2016/09/17 HTML / CSS

销售行政专员职责

2014/01/03 职场文书

社区庆八一活动方案

2014/02/02 职场文书

模具专业毕业推荐信

2014/03/08 职场文书

班主任寄语大全

2014/04/04 职场文书

领导四风问题整改措施思想汇报

2014/10/13 职场文书

2015年植树节活动总结

2015/02/06 职场文书

雾霾停课通知

2015/04/24 职场文书

Redis安装启动及常见数据类型

2021/04/14 Redis

python周期任务调度工具Schedule使用详解

2021/11/23 Python

【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀

2022/04/01 DOTA