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

基础用法

适用广泛的基础用法。

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 面包屑的更多相关文章

  1. woocommerce隐藏breadcrumb面包屑导航

    woocommerce已经集成比较完善的组件,当然也包含breadcrumb面包屑导航,但是我们如果调整一下breadcrumb的位置要如何操作呢?首先要先把woocommerce隐藏breadcru ...

  2. yoast breadcrumb面包屑导航修改去掉product

    前面我们创建了wordpress添加post_type自定义文章类型和调用自定义post_type文章,现在yoast 面包屑导航出现home >product >分类1,想要把produ ...

  3. react+ant design Breadcrumb面包屑组件

    import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...

  4. 【angular5项目积累总结】breadcrumb面包屑组件

    view code <div class="fxs-breadcrumb-wrapper" aria-label="Navigation history" ...

  5. Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能

    面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...

  6. amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb

    amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...

  7. woocommerce面包屑导航breadcrumb的修改

    我们知道woocommerce自带了面包屑导航breadcrumb,但有时我们需要调整一下它所在的位置,那么需要如何操作呢?有哪些参数可以调用呢?随ytkah一起来看看吧 首先删除默认的面包屑导航 1 ...

  8. 一行代码搞定WordPress面包屑导航breadcrumb

    有好几位网友在问WordPress面包屑导航breadcrumb怎么操作,网上有些教程是去function文件中定义,其实不用那么复杂,很简单一行代码就能搞定.下面随ytkah一起来看看.如果是单页, ...

  9. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

随机推荐

  1. 【异常】update更新java.sql.SQLException: Duplicate entry '2019-07-30 00:00:00-110100' for key

    1 详细异常信息 User class threw exception: java.sql.SQLException: Duplicate entry '2019-07-30 00:00:00-110 ...

  2. stm32WB 笔记

    1.HAL Debug functions(调试功能) 可以在不同模式下使能或者失能调试器 This section provides functions allowing to:• Enable/D ...

  3. IPC之namespace.c源码解读

    // SPDX-License-Identifier: GPL-2.0 /* * linux/ipc/namespace.c * Copyright (C) 2006 Pavel Emelyanov ...

  4. AlertDialog 对话框 5种

    MainActivity.class public class MainActivity extends AppCompatActivity implements View.OnClickListen ...

  5. Beta冲刺版本第一天

    该作业所属课程:https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 作业要求地址:https://edu.cnblogs.com ...

  6. java线程基础巩固---Daemon线程的创建以及使用场景分析

    daemon线程既守护线程,而在jdk中对于Thread中针对守护线程有专门的API,如下: 而之前在公司项目中就看到过有人使用过Thread中的这个API,但是对于它的使用场景完全不知,所以这次好好 ...

  7. 从二叉查找树到平衡树:avl, 2-3树,左倾红黑树(含实现代码),传统红黑树

    参考:自平衡二叉查找树 ,红黑树, 算法:理解红黑树 (英文pdf:红黑树) 目录 自平衡二叉树介绍 avl树 2-3树 LLRBT(Left-leaning red-black tree左倾红黑树 ...

  8. BZOJ 2157: 旅游 (树链剖分+线段树)

    树链剖分后线段树维护区间最大最小值与和. 支持单点修改与区间取反. 直接写个区间取反标记就行了.线段树板题.(200行6000B+ 1A警告) #include <cstdio> #inc ...

  9. 【Layui】Layui模板引擎生成下拉框不显示

    首先让我震惊了一下,layui引擎模板居然是支持ajax操作的 博主的需求是需要在数据表格内放入下拉框而下拉框的数据是数据库内查出来的(详见上一篇博客),但是下拉框怎么也显示不出来 找了四个小时的问题 ...

  10. EntityManager的merge()方法

    EntityManager的merge()方法相当于hibernate中session的saveOrUpdate()方法: 用于实体的插入和更新操作: