脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Element Breadcrumb 面包屑

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微信小程序和uniapp配置环境地址

    Vue微信小程序和uniapp配置环境地址

    在微信小程序中，可以使用全局配置和使用开发、体验、生产环境的地址，这篇文章主要介绍了Vue微信和uniapp配置环境地址,需要的朋友可以参考下
    2023-07-07
  • 基于element-ui表格的二次封装实现

    基于element-ui表格的二次封装实现

    本文主要介绍了基于element-ui表格的二次封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue-router如何实现路由懒加载

    Vue-router如何实现路由懒加载

    在现代前端开发中,Vue.js凭借其轻量级和易用性,成为了很多开发者的首选框架,本文将结合实际案例,详细讲解Vue-Router路由懒加载的用法,需要的可以参考下
    2024-11-11
  • ElementPlus Table表格实现可编辑单元格

    ElementPlus Table表格实现可编辑单元格

    本文主要介绍了ElementPlus Table表格实现可编辑单元格,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • vue-cli在 history模式下的配置详解

    vue-cli在 history模式下的配置详解

    这篇文章主要介绍了vue-cli在 history模式下的配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue-cli3.0如何修改端口号

    vue-cli3.0如何修改端口号

    这篇文章主要介绍了vue-cli3.0如何修改端口号，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 推荐一款简易的solid js消息UI库使用详解

    推荐一款简易的solid js消息UI库使用详解

    这篇文章主要为大家介绍了推荐一款简易的solid-js消息UI库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • vue.js模仿京东省市区三级联动的选择组件实例代码

    vue.js模仿京东省市区三级联动的选择组件实例代码

    选择省市区是我们大家在填写地址的时候经常会遇到的一个功能，下面这篇文章主要给大家介绍了关于利用vue.js模仿实现京东省市区三级联动选择组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-11-11
  • 解决vue的过渡动画无法正常实现问题

    解决vue的过渡动画无法正常实现问题

    今天小编就为大家分享一篇解决vue的过渡动画无法正常实现问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 使用Vue实现防篡改的水印

    使用Vue实现防篡改的水印

    我们在平时上网的时候会看到有些图片是加水印的,一般水印往往是后端来做的,不过有些站点要保护的知识产权类型比较多,不光是图片,可能还有视频或者文字,所以我们水印的作用,就是给他做一个适当的限制,本文就给大家介绍一下如何使用Vue实现防篡改的水印
    2023-08-08

最新评论