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 中的面包屑导航( ...
随机推荐
- 6、SSH远程管理服务实战
1.SSH基本概述 SSH是一个安全协议,在进行数据传输时,会对数据包进行加密处理,加密后在进行数据传输.确保了数据传输安全.那SSH服务主要功能有哪些呢? 1.提供远程连接服务器的服务. 2.对传输 ...
- IO[File_API学习]
IO流[File_API学习的使用] File_API学习的使用1.名称分隔符 / \ separatorjava下路径:\ 在Windows下的路径,在java里 \ 是转义字符.需要 \\Str ...
- 用Python+Aria2写一个自动选择最优下载方式的E站爬虫
前言 E站爬虫在网上已经有很多了,但多数都只能以图片为单位下载,且偶尔会遇到图片加载失败的情况:熟悉E站的朋友们应该知道,E站许多资源都是有提供BT种子的,而且通常打包的是比默认看图模式更高清的文件: ...
- CPU排行
早期的时候,在某个网站上面收录下来的关于CPU排行的信息,发出来让更多的人看到,希望能够帮助到一些人!
- mysql高级:触发器、事务、存储过程、调用存储过程
一.触发器 二.pymysql事务测试 三.存储过程 四.pymysql调用存储过程 一.触发器 在某个时间发生了某个事件时 会自动触发一段sql语句 create trigger cmd_ins ...
- Linux使用wget仿站
运行命令 $ wget -r -p -np -k www.avatrade.cn 参数说明 -r --recursive(递归) specify recursive download.(指定递归下载) ...
- angular打印功能实现方式
目前主流的前端打印方式有两种:一种是使用浏览器打印功能直接打印页面,另一种是调用本地控件实现.浏览器打印功能单一,不适用于复杂的业务表单,而打印控件可以设计打印模板,实现复杂表单的打印,十分适合复杂的 ...
- nagios-调用脚本
在自已编写监控插件之前我们首先需要对nagios监控原理有一定的了解 Nagios的功能是监控服务和主机,但是他自身并不包括这部分功能,所有的监控.检测功能都是通过各种插件来完成的. 启动Nagios ...
- BZOJ 1016 生成树计数
现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树.(如果两颗最小生成树中至少有一条边不同,则这两个最小生成树就是不同的).由于不同的最小生成树 ...
- 逻辑卷管理(LVM)
LVM:Logical Volume Management 逻辑卷管理 LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵活性. 传统磁盘管理:我们上层是直接访问文件系统,从而对底层的物 ...