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

在视频前插入广告

Nov 20 Javascript

JS实现简单的Canvas画图实例

Jul 04 Javascript

在jquery boxy中添加百度地图坐标拾取注意流程

Apr 03 Javascript

下雪了 javascript实现雪花飞舞

Aug 02 Javascript

实例讲解JavaScript中的this指向错误解决方法

Jun 13 Javascript

Vue.js组件tabs实现选项卡切换效果

Dec 01 Javascript

JavaScript实现简易的天数计算器实例【附demo源码下载】

Jan 18 Javascript

详解如何将angular-ui的图片轮播组件封装成一个指令

May 09 Javascript

Vue 换肤的示例实践

Jan 23 Javascript

JavaScript中变量、指针和引用功能与操作示例

Aug 04 Javascript

利用JavaScript将Excel转换为JSON示例代码

Jun 14 Javascript

Vue.js实现tab切换效果

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