Breadcrumb 面包屑
显示当前页面的路径,快速返回之前的任意页面。
基础用法
适用广泛的基础用法。
在el-breadcrumb
中使用el-breadcrumb-item
标签表示从首页开始的每一级。Element 提供了一个separator
属性,在el-breadcrumb
标签中设置它来决定分隔符,它只能是字符串,默认为斜杠/
。
<el-breadcrumb separator="/">
<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>
图标分隔符
通过设置 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>
Breadcrumb Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
separator | 分隔符 | string | — | 斜杠'/' |
separator-class | 图标分隔符 class | string | — | - |
Breadcrumb Item Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
to | 路由跳转对象,同 vue-router 的 to |
string/object | — | — |
replace | 在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录 | boolean | — | false |
Breadcrumb 面包屑的更多相关文章
- woocommerce隐藏breadcrumb面包屑导航
woocommerce已经集成比较完善的组件,当然也包含breadcrumb面包屑导航,但是我们如果调整一下breadcrumb的位置要如何操作呢?首先要先把woocommerce隐藏breadcru ...
- yoast breadcrumb面包屑导航修改去掉product
前面我们创建了wordpress添加post_type自定义文章类型和调用自定义post_type文章,现在yoast 面包屑导航出现home >product >分类1,想要把produ ...
- react+ant design Breadcrumb面包屑组件
import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...
- 【angular5项目积累总结】breadcrumb面包屑组件
view code <div class="fxs-breadcrumb-wrapper" aria-label="Navigation history" ...
- Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能
面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...
- amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb
amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...
- woocommerce面包屑导航breadcrumb的修改
我们知道woocommerce自带了面包屑导航breadcrumb,但有时我们需要调整一下它所在的位置,那么需要如何操作呢?有哪些参数可以调用呢?随ytkah一起来看看吧 首先删除默认的面包屑导航 1 ...
- 一行代码搞定WordPress面包屑导航breadcrumb
有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...
- Bootstrap <基础十八>面包屑导航(Breadcrumbs)
面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...
随机推荐
- python常用模块:sys、os、path、setting、random、shutil
今日内容讲了3个常用模块 一.sys模块二.os模块三.os下path模块四.random模块五.shutil模块 一.sys模块 import sys #环境变量 print(sys.path) # ...
- 【audition CC】将3分钟的歌曲无缝延长到15分钟
- Python库整理
库名称简介 Chardet字符编码探测器,可以自动检测文本.网页.xml的编码. colorama主要用来给文本添加各种颜色,并且非常简单易用. Prettytable主要用于在终端或浏览器端构建格式 ...
- Cmd有关IP的部分命令
ping命令判断系统数据包在传送的时候至少会经过一个以上的路由器,当数据包经过一个路由器的时候,TTL就会自动减1,如果减到0了还是没有传送到目的主机,那么这个数据包就会自动丢失,这时路由器会发送一个 ...
- Mac下 CMD常用命令
1.常用命令 pwd 当前工作目录 cd(不加参数) 进root cd(folder) 进入文件夹 cd .. 上级目录 cd ~ 返回root cd - 返 ...
- 下载Mybatis源码
百度搜索关键字:Mybatis 点击第二个选项,为啥不是第一个?因为卡. 打开之后,长这个样子: 点击画红圈的位置,进入github源码库: 发现,进入的太深了.点击mybatis-3,进到外层目录, ...
- 持久化存储与HTTP缓存
本文主要学习一下一些高级的HTTP知识,例如Session LocalStorage Cache-Control Expires ETag 其实主要就是涉及到了持久化存储与缓存的技术 在此之前已经学习 ...
- STM32F103C8T6最小板搞定CMSIS-DAP和SWO功能
转载:http://www.stmcu.org.cn/module/forum/forum.php?mod=viewthread&tid=616081&extra=page%3D&am ...
- Django项目开发,XSS攻击,图片防盗链,图片验证码,kindeditor编辑器
目录 一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...
- HDU 6040 - Hints of sd0061 | 2017 Multi-University Training Contest 1
/* HDU 6040 - Hints of sd0061 [ 第k小数查询,剪枝 ] 题意: 给出随机数列 a[N] (N < 1e7) 询问 b[M] (M < 100) ,对于每个询 ...