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 中的面包屑导航( ...
随机推荐
- Win7系统开机速度慢怎么解决?
Win7系统使用时间长了,我们就会发现电脑的开机启动速度变慢了,其实除了关闭相应的启动项之外,我们还可以对电脑进行相关的系统配置,来使电脑能够更加快速的启动.下面好系统重装助手就来告诉你怎么解决Win ...
- python网络编程:socket半连接池、UDP通讯模板
一.TCP半连接池原理 二.UDP通讯 三.UDP聊天 四.UDP聊天2 五.UDP会粘包吗 六.UDP总结 七.UDP与TCP对比 一.TCP半连接池原理 客户端 import socket cli ...
- python常用模块:re模块案例、subprocess
今日内容: 一.re模块二.re练习三.subproces模块 一.re模块 import re # [] 范围匹配 中间 用-来连接 # re.findall("[a-zA-Z0-9]&q ...
- python常用模块:包的使用、init作用、相对导入绝对导入与内置函数
今天主要讲的内容有: 一.包的详解二.相对导入和绝对导入三.内置模块补充 一.包的详解 1.包是什么 包其实也是一个模块,只不过是一个大的模块下包含一堆模块的载体 本质上也是一个文件夹,与普通文件的区 ...
- python面向对象基础(三)内置方法 __xx__
__str__和__repr__,__format__ 改变对象的字符串显示__str__,__repr__ 自定制格式化字符串__format__ #_*_coding:utf-8_*_ forma ...
- HDU-3336-Count the string(扩展KMP)
链接: https://vjudge.net/problem/HDU-3336 题意: It is well known that AekdyCoin is good at string proble ...
- 制作中文字符集zh_CN.utf8的centos7系统
以下是Dockerfile文件 ===================================== FROM centos:7ENV LANG=zh_CN.UTF-8 \ LANGUAGE=z ...
- [Python之路] 闭包
一.思考一个问题 我们要给定一个x,要求一条直线上x对应的y的值.公式是y = kx+b. 我们需要用k,b来确定这条直线,则我们实现的函数应该有3个参数: def line(k, b, x): pr ...
- EntityManager的基本方法
1.Persistence 主要用来获取EntityManagerFactory的实例; 通过静态方法:createEntityManagerFactory 来实现: 该方法有两个重载版本: ...
- js中彻底删除对象属性
delete运算符可以删除对象的属性,但是仅仅是断开了属性和宿主对象的联系,而不会去操作被删除属性的属性值,所以就需要彻底删除的出现 function myDelete(obj,propertyNam ...