Element Breadcrumb 面包屑的使用方法

更新时间：2020年07月26日 16:51:41 作者：ForeverJPB.

这篇文章主要介绍了Element Breadcrumb 面包屑的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

组件— 面包屑

什么是面包屑导航

一般页面内容上方都会有一个路径导航，这个导航就是面包屑导航。例如：

上面这个图表示我们当前的页面是Breadcrumb面包屑，上一级目录是组件页面，再上一级目录是Element UI页面。当我们点击这些目录时会返回到对应的页面中去。再例如：

上面这个图表示我们当前所在的位置是活动详情页面，上一级目录是活动列表页面…以此类推。
这些就是面包屑导航。

基础用法

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

图标分隔符

<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

Breadcrumb Item Attributes

到此这篇关于Element Breadcrumb 面包屑的使用方法的文章就介绍到这了,更多相关Element Breadcrumb 面包屑内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue中watch监听不到变化的解决
本文主要介绍了vue中watch监听不到变化的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
Vue 简单配置公用接口地址方式
这篇文章主要介绍了Vue 简单配置公用接口地址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Vue中简单的虚拟DOM是什么样
这些年写前端vue时经常碰到虚拟DOM这个单词，但都是听到就算了，左耳进右耳出，知道有这么个东西就完了，因为感觉也没有影响我实现公司的产品业务逻辑。今天在这里想花点时间探讨下虚拟DOM相关的知识，给自己补补课
2022-10-10
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
这篇文章主要介绍了解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue.js 实现微信公众号菜单编辑器功能(一)
最近vue.js 非常火热，小编也趁机学习了下vuejs的一些基础知识，于是尝试做一个像微信平台里的菜单编辑器功能，下面脚本之家小编把vue.js 微信公众号菜单编辑器功能的实现代码分享给大家，需要的朋友参考下
2018-05-05
基于vue2框架的机器人自动回复mini-project实例代码
本篇文章主要介绍了基于vue2框架的机器人自动回复mini-project实例代码，具有一定的参考价值，有兴趣的可以了解一下
2017-06-06
网站国际化多语言处理工具i18n安装使用方法图文详解
国际化是设计软件应用的过程中应用被使用与不同语言和地区,下面这篇文章主要给大家介绍了关于网站国际化多语言处理工具i18n安装使用方法的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-09-09
vue Router(v3.x) 路由传参的三种方式场景分析
vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转，传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式，感兴趣的朋友跟随小编一起看看吧
2023-07-07
vue用户长时间不操作退出到登录页的两种实现方式
出于安全考虑，用户长时间不操作，就回到登录页面，让用户重新登录，本文就记录一下实现这种效果的两种方式，具有一定的参考价值，感兴趣的可以了解一下
2021-09-09
elementui简易介绍(推荐)
ElementUI是一套基于VUE2.0的桌面端组件库,ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面,本文给大家分享elementui简易介绍,感兴趣的朋友一起看看吧
2024-01-01