breadcrumb 根据路由_Breadcrumb 面包屑

Breadcrumb 面包屑

概述

显示网站的层级结构，告知用户当前所在位置，以及在需要向上级导航时使用。

代码示例

Home / Components / Breadcrumb

基础用法

最基础的用法，通过设置to属性添加链接。

Home

Components

Breadcrumb

export default {

}

Home / Components / Breadcrumb

带图标的

可自定义每项的内容，比如带有一个图标。

Home

Components

Breadcrumb

export default {

}

Home > Components > Breadcrumb

Home => Components => Breadcrumb

分隔符

通过设置separator属性来自定义分隔符，比如>，也可以接受自定义的HTML字符串。

.demo-breadcrumb-separator{

color: #ff5500;

padding: 0 5px;

}

Home

Components

Breadcrumb

Home

Components

Breadcrumb

export default {

}

API

Breadcrumb props

属性

说明

类型

默认值

separator

自定义分隔符

String | Element String

/

BreadcrumbItem props

属性

说明

类型

默认值

to

链接，不传则没有链接，支持 vue-router 对象

String | Object

-

replace

路由跳转时，开启 replace 将不会向 history 添加新记录

Boolean

false

target

相当于 a 链接的 target 属性

String

_self