Breadcrumb 面包屑

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

基础用法

适用广泛的基础用法。

在el-breadcrumb中使用el-breadcrumb-item标签表示从首页开始的每一级。Element 提供了一个separator属性，在el-breadcrumb标签中设置它来决定分隔符，它只能是字符串，默认为斜杠/。

1 <el-breadcrumb separator="/">
2   <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
3   <el-breadcrumb-item>活动管理</el-breadcrumb-item>
4   <el-breadcrumb-item>活动列表</el-breadcrumb-item>
5   <el-breadcrumb-item>活动详情</el-breadcrumb-item>
6 </el-breadcrumb>

View Code

图标分隔符

通过设置 separator-class 可使用相应的 iconfont 作为分隔符，注意这将使 separator 设置失效

1 <el-breadcrumb separator-class="el-icon-arrow-right">
2   <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
3   <el-breadcrumb-item>活动管理</el-breadcrumb-item>
4   <el-breadcrumb-item>活动列表</el-breadcrumb-item>
5   <el-breadcrumb-item>活动详情</el-breadcrumb-item>
6 </el-breadcrumb>

View Code

Breadcrumb Attributes

参数	说明	类型	可选值	默认值
separator	分隔符	string	—	斜杠'/'
separator-class	图标分隔符 class	string	—	-

Breadcrumb Item Attributes

参数	说明	类型	可选值	默认值
to	路由跳转对象，同 `vue-router` 的 `to`	string/object	—	—
replace	在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录	boolean	—	false

转载于:https://www.cnblogs.com/grt322/p/8564446.html

Breadcrumb 面包屑相关推荐

Vue elementUI中的Breadcrumb面包屑
目录一.前言二.组件使用三.总结一.前言面包屑用于显示当前页面的路径,快速返回之前的任意页面. 例如: 二.组件使用 elementUI官网的实例十分简单,并没有配合路由来创建面包屑. 但是 ...
vue + Element UI 动态Breadcrumb 面包屑的制作
文章目录效果一.路由配置二.使用步骤 1.Breadcrumb.vue: 2.在页面中使用总结效果面包屑用于显示当前页面的路径,快速返回之前的任意页面. 一.路由配置代码如下: impo ...
vue3 - 仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件
仿 element-ui Breadcrumb 面包屑组件封装自己的面包屑组件 element-ui 面包屑结构 <el-breadcrumb separator="/"&g ...
改变路径但是不让它跳转_Vue实战047：Breadcrumb面包屑实现导航路径
前言在网站中我们经常看到有个导航路径,可以直观地显示当前页面的路径,并快速返回之前的任意页面.这是一个非常实用的功能,也是在Web前端必备的导航UI之一.今天我们借助el-breadcrumb来快速 ...
react+ant design Breadcrumb面包屑组件
import React from 'react'; import { Link }from 'react-router-dom'; import { Breadcrumb } from 'antd' ...
从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）
往期从0到1完成一个Vue后台管理项目(一.创建项目) 从0到1完成一个Vue后台管理项目(二.使用element-ui) 从0到1完成一个Vue后台管理项目(三.使用SCSS/LESS,安装图标库 ...
Bootstrap 组件 Breadcrumb（面包屑）
Breadcrumb(面包屑) 面包屑是用来干嘛的呢?指示导航层次结构中当前页面的位置,导航层次结构通过CSS自动添加分隔符. 就是指示现在页面在导航栏中的层级目录的位置. 演示代码 <nav ...
Vue3面包屑（Breadcrumb）
Vue2面包屑(Breadcrumb) 可自定义设置以下属性: router 的路由数组(routes),必传,类型:Array<{path: string, query?: object, n ...
035_Breadcrumb面包屑
1. Breadcrumb面包屑 1.1. Breadcrumb面包屑显示当前页面的路径, 快速返回之前的任意页面. 1.2. Breadcrumb Attributes 参数说明类型默认值 s ...