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 中的面包屑导航( ...
随机推荐
- odoo 常用模型的简写
<act_window>是窗口操作模型ir.actions.act_window <menuitem>是菜单项模型ir.ui.menu <report>是报表操作模 ...
- NORDIC GATT事件
假设有两个服务,每个服务注册相应事件 注册的事件为ble_dev_cfg_on_ble_evt.ble_lora_cfg_on_ble_evt 当在任何一个服务中发生GATT特征读或写的时候,注册的这 ...
- visio连接线随形状移动自动伸缩
粘附可保持形状和连接线彼此依附.粘附打开时,可在移动形状时保持连接线跟着一起移动.粘附关闭时,移动形状时连接线将不会跟着移动. 1.在“视图”选项卡上的“视觉帮助”组中,单击对话框启动器 . 2. ...
- 3.NIO_Buffer缓冲区
1.缓冲区(Buffer) 一个用于特定基本数据类型的容器.由 java.nio 包定义的,所有缓冲区都是 Buffer 抽象类的子类,任何时候访问 NIO 中 的数据,都是通过缓冲区进行操作 在 J ...
- 使用Task的Wait和Result时注意
如果计算限制的任务抛出未处理的异常,该异常会被“吞噬”并存储到一个集合中,而线程池线程可以返回到线程池中.调用Wait方法或者Result属性时,这些成员会抛出一个System.AggregateEx ...
- QTP(13)
练习1:Flight4a 要求: a.录制Flight4a登录+购票+退出业务流程 b.实现登录1次,购票3次,退出1次 c.对Fly From.Fly to.航班实现随机参数化 随机参数化:Rand ...
- HH的项链 HYSBZ - 1878 (莫队/ 树状数组)
HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一 段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此他的项链变得越来越长.有一天,他突然 ...
- Optimization Algorithms
1. Stochastic Gradient Descent 2. SGD With Momentum Stochastic gradient descent with momentum rememb ...
- 清北学堂dp图论营游记day6
xysq主讲: 求点双和边双代码: 对所有点进行染色,如果存在一种方案使得相邻的点不同色,那么他就是个二分图. 二分图两种求法,1,dfs求增广路. 2,网络流:最大流=最小割 差分约束: 下午又要考 ...
- C# dll文件添加引用失败
未能添加对“***/***.dll”的引用.请确保此文件可访问并且是一个有效的程序集或 COM 组件. 原因:dll文件使用其他语言生成,C#无法识别 解决方法: 添加using System.Run ...