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中本地静态图片路径写法

    vue中本地静态图片路径写法

    这篇文章给大家介绍了vue中本地静态图片路径写法及Vue.js中引用图片路径的方式,需要的朋友参考下吧
    2018-03-03
  • Vue中路由参数与查询参数传递对比解析

    Vue中路由参数与查询参数传递对比解析

    在Vue.js中,路由与导航不仅涉及页面切换,还包括了向页面传递参数和获取查询参数,这篇文章主要介绍了Vue路由参数与查询参数传递,需要的朋友可以参考下
    2023-08-08
  • vue-axios使用详解

    vue-axios使用详解

    本篇文章主要介绍了vue-axios使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue+elementui 实现新增和修改共用一个弹框的完整代码

    vue+elementui 实现新增和修改共用一个弹框的完整代码

    Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是Mint UI ,今天给大家普及vue+elementui 实现新增和修改共用一个弹框的完整代码,一起看看吧
    2021-06-06
  • 解读Vue-loader的相关知识

    解读Vue-loader的相关知识

    这篇文章主要介绍了解读Vue-loader的相关知识,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • 使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

    使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

    这篇文章主要介绍了用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果,代码简单易懂,非常不错,具有一定的参考借鉴价值需要的朋友可以参考下
    2019-08-08
  • 深入理解Vue 组件之间传值

    深入理解Vue 组件之间传值

    这篇文章较详细的给大家介绍了vue组件之间传值的方法,在 Vue 中,可以使用props向子组件传递数据。具体传递方法大家跟随脚本之家小编一起看看吧
    2018-08-08
  • 浅谈Vue灰度发布新功能的使用

    浅谈Vue灰度发布新功能的使用

    本文主要介绍了浅谈Vue灰度发布新功能的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue.js el-table动态单元格列合并方式

    vue.js el-table动态单元格列合并方式

    这篇文章主要介绍了vue.js el-table动态单元格列合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue + ele 实现下拉选择框和下拉多选选择框处理方案

    vue + ele 实现下拉选择框和下拉多选选择框处理方案

    这篇文章主要介绍了vue + ele 实现下拉选择框和下拉多选选择框处理方案,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08

最新评论