ElementUI浅尝辄止29:Breadcrumb 面包屑

2023-11-07

显示当前页面的路径,快速返回之前的任意页面。

1.如何使用?

el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性,在el-breadcrumb标签中设置它来决定分隔符,它只能是字符串,默认为斜杠/

<el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
  <el-breadcrumb-item>活动列表</el-breadcrumb-item>
  <el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>

2.图标分隔符

通过设置 separator-class 可使用相应的 iconfont 作为分隔符,注意这将使 separator 设置失效

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ElementUI浅尝辄止29:Breadcrumb 面包屑 的相关文章

  • SSH框架总结(框架分析+环境搭建+实例源码下载)

    首先 SSH不是一个框架 而是多个框架 struts spring hibernate 的集成 是目前较流行的一种Web应用程序开源集成框架 用于构建灵活 易于扩展的多层Web应用程序 集成SSH框架的系统从职责上分为四层 表示层 业务逻辑

随机推荐

  • mysql盲注脱裤_白帽子挖洞—SQL注入篇

    0x00介绍 SQL注入 就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串 最终达到欺骗服务器执行恶意的SQL命令 具体来说 它是利用现有应用程序 将 恶意的 SQL命令注入到后台数据库引擎执行的能力 它可以通过在W
  • pta 评委打分

    评委打分 青年歌手参加歌曲大奖赛 有10个评委进行打分 将评分按降序排列 试编程求这位选手的平均得分 去掉一个最高分和一个最低分 指导 这道题的核心是排序 将评委所打的10个分数利用数组按降序排列 计算数组中除第一个和最后一个分数以外的数的
  • Caused by: javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path

    今天使用axis2访问https格式的webservice 遇到了这个错误Caused by javax net ssl SSLHandshakeException sun security validator ValidatorExcep
  • jupyter notebook安装过程中碰到的问题:1、juepyter notebook按new创建新文件时弹出来的网页是4042、jupyter代码运行时直接跳到下一行没有运行代码

    1 juepyter notebook按new创建新文件时弹出来的网页是404是浏览器的问题 更换默认浏览器即可在系统中搜索默认应用把web浏览器改成edge 如果在更改时一直闪退无法更改默认浏览器可能是你的电脑管家工具箱的浏览器帮你自动锁
  • Linux获得管理员权限

    一 判断此时使用用户是否具有管理员权限 1 采用符号 进行判断 若使用具有管理员权限的用户登录时 将出现 符号 若使用不具有管理员权限的用户登录时 将出现 符号 2 使用uid gid 的group进行判断 具有管理员权限的用户将与root
  • TypeScript 快速上手学习系列 —— 接口

    TypeScript 接口 TypeScript 接口是一系列抽象方法的声明 是一些方法特征的集合 这些方法都是抽象的 需要由具体的类去实现 然后第三方就可以通过这些抽象方法调用 让具体的类执行具体的方法 定义 TypeScript 接口定
  • 以太坊智能合约安全监测工具 Oyente

    金色财经讯 2017年6月19日 数字资产管理公司Melonport AG与Oyente的开发者们合作 发布了一个测试版分析工具 旨在检查可执行的分布式代码合同 EDCC 的缺陷 Melonport和Oyente发布Bug检查工具 来源 金
  • Java多版本环境并存配置

    安装准备 Windows10 java8的jdk java15的jdk 本次操作是在Windows10的系统下进行的 注意 可能java对中文支持的原因 最好java环境和程序使用的路径中不要包含中文 java8 java8最简单的方式就是
  • dataframe数据按行做线性拟合

    转载 https blog csdn net m0 37324740 article details 79529963 数据形式 目的 对每一行进行线性拟合 计算斜率和评估斜率的不确定性 方法 调用python的sklearn包中的线性回归
  • 计网 -《图解http》读书笔记

    1 了解Web 网络基础 1 1 WWW World Wide Web 万维网 3项WWW构建技术 把SGML 通用标记语言 作为页面的文本标记语言的HTML HyperText Markup Language 超文本标记语言 作为文档传递
  • linux 时区 -0500,Nodejs 修改 Linux 时间、时区

    最近遇到了时区设置的问题 在Nodejs中 取当前时间 GMT格式 可以使用Date var GMTDate new Date Sun Mar 06 2016 20 42 44 GMT 0500 GMT 1 但有时候server的时间要求是
  • Java异步注解@Async详解

    一 Async注解 Async的作用就是异步处理任务 在方法上添加 Async 表示此方法是异步方法 在类上添加 Async 表示类中的所有方法都是异步方法 使用此注解的类 必须是Spring管理的类 需要在启动类或配置类中加入 Enabl
  • eclipse 导入svn 项目报 库不存在 svn: E210004: Handshake failed, data stream ended unexpectedly

    eclipse导入SVN项目报错 preface 取消代理设置 遇到 eclipse marketplace 不能打开 推荐一个 eclipse 暗黑主题 参考链接 preface 这个问题之前已经遇到 过一次 竟然忘记了 handshak
  • QT 解决提升控件后提示 No such file or directory

    在QtCreator中 给控件做提升时 提示 No such file or directory 很明显 QtCreator找不到自定义控件文件 那么可以在pro文件里面添加一句代码 INCLUDEPATH PWD widgets 自定义控
  • 周立功串口服务器维修方法,周立功医生

    涨姿势RS485作为一项标准通信协议 在工业中得到了广泛的应用特别是仪器仪表中 RS485的特点是可以组网通信且布线简单 一个主机通过RS485总线可以与多个从机通信 在实际应用中RS485通信抗干扰能力虽然强 但是必要的保护措施还是不可缺
  • 线上页面有时候elementui 的字体图标会乱码

    1 错误现象 2 问题分析 3 解决方法 3 唠嗑唠嗑 大白鹅say 针对我项目问题分析原因可能是 因为vue脚手架编译使用的和elemntui里面编译的工具不一样 如若有错误部分 请指出来 我会改正 1 错误现象 2 问题分析 查阅资料之
  • 关于SecurityException RECEIVER_EXPORTED or RECEIVER_NOT_EXPORTED

    关于SecurityException RECEIVER EXPORTED or RECEIVER NOT EXPORTED https github com android play billing samples issues 618
  • Servlet 实现上传文件

    1 基于 form 表单实现的上传文件 核心方法 HttpServletRequest 类方法 方法 描述 Part getPart String name 获取请求中给定 name 的文件 Collection
  • [创业之路-44] :复盘与自省 - 如何选择创业公司

    目录 1 看公司的愿景 X 2 看老板 X 3 看创始团队 X gt Y 4 看核心团队 X 5 看融资能力 6 看盈利能力 7 看市场 Y 8 客户 9 看产品 X 10 看技术 11 看内部管理 X 12 看个人的职位和股权 Y 13
  • ElementUI浅尝辄止29:Breadcrumb 面包屑

    显示当前页面的路径 快速返回之前的任意页面 1 如何使用 在el breadcrumb中使用el breadcrumb item标签表示从首页开始的每一级 Element 提供了一个separator属性 在el breadcrumb标签中