Breadcrumb 面包屑
显示当前页面在系统层级结构中的位置，并能向上返回。
何时使用
- 当系统拥有超过两级以上的层级结构时；
- 当需要告知用户『你在哪里』时；
- 当需要向上导航的功能时。
基本
最简单的用法。
vue
<template>
<g-breadcrumb>
<g-breadcrumb-item>Home</g-breadcrumb-item>
<g-breadcrumb-item><a href="">Application Center</a></g-breadcrumb-item>
<g-breadcrumb-item><a href="">Application List</a></g-breadcrumb-item>
<g-breadcrumb-item>An Application</g-breadcrumb-item>
</g-breadcrumb>
</template>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
带图标的
图标放在文字前面。
vue
<template>
<g-breadcrumb>
<g-breadcrumb-item>
<g-icon type="home" />
</g-breadcrumb-item>
<g-breadcrumb-item>
<g-icon type="user" />
<span>Application List</span>
</g-breadcrumb-item>
<g-breadcrumb-item>Application</g-breadcrumb-item>
</g-breadcrumb>
</template>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
分隔符
使用 separator=">" 可以自定义分隔符。
vue
<template>
<g-breadcrumb separator=">">
<g-breadcrumb-item>Home</g-breadcrumb-item>
<g-breadcrumb-item>Application Center</g-breadcrumb-item>
<g-breadcrumb-item>Application List</g-breadcrumb-item>
<g-breadcrumb-item>An Application</g-breadcrumb-item>
</g-breadcrumb>
</template>1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
分隔符插槽
使用插槽自定义分隔符。
vue
<template>
<g-breadcrumb>
<template #separator>
<g-icon type="arrow-right" />
</template>
<g-breadcrumb-item>Home</g-breadcrumb-item>
<g-breadcrumb-item>Application Center</g-breadcrumb-item>
<g-breadcrumb-item>Application List</g-breadcrumb-item>
<g-breadcrumb-item>An Application</g-breadcrumb-item>
</g-breadcrumb>
</template>1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
带下拉菜单的面包屑
面包屑支持下拉菜单。
vue
<template>
<g-breadcrumb>
<g-breadcrumb-item>Ant Design Vue</g-breadcrumb-item>
<g-breadcrumb-item>
<a href="">Component</a>
</g-breadcrumb-item>
<g-breadcrumb-item>
<g-dropdown>
<template #overlay>
<g-menu>
<g-menu-item>
<a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
General
</a>
</g-menu-item>
<g-menu-item>
<a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
Layout
</a>
</g-menu-item>
<g-menu-item>
<a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
Navigation
</a>
</g-menu-item>
</g-menu>
</template>
<a class="ant-dropdown-link" @click.prevent>
General <g-icon type="down" />
</a>
</g-dropdown>
</g-breadcrumb-item>
<g-breadcrumb-item>Button</g-breadcrumb-item>
</g-breadcrumb>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
路由
和 vue-router 进行结合使用。
vue
<template>
<g-breadcrumb>
<g-breadcrumb-item>
<router-link to="/">
<g-icon type="home" />
</router-link>
</g-breadcrumb-item>
<g-breadcrumb-item>
<router-link to="/components">
<g-icon type="appstore" />
<span>Application List</span>
</router-link>
</g-breadcrumb-item>
<g-breadcrumb-item>Application</g-breadcrumb-item>
</g-breadcrumb>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
自动生成
自动生成面包屑。
vue
<template>
<div>
<g-breadcrumb :routes="routes">
<template #itemRender="{ route, params, routes, paths }">
<span v-if="routes.indexOf(route) === routes.length - 1">
{{ route.breadcrumbName }}
</span>
<router-link v-else :to="paths.join('/')">
{{ route.breadcrumbName }}
</router-link>
</template>
</g-breadcrumb>
</div>
</template>
<script>
export default {
data() {
return {
routes: [
{
path: 'index',
breadcrumbName: 'home'
},
{
path: 'first',
breadcrumbName: 'first'
},
{
path: 'second',
breadcrumbName: 'second'
}
]
}
}
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
API
Breadcrumb
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| itemRender | 自定义链接函数，和 vue-router 配置使用 | (route, params, routes, paths) => vNode | - | |
| params | 路由的参数 | object | - | |
| routes | router 的路由栈信息 | routes[] | - | |
| separator | 分隔符自定义 | string | slot | / |
Breadcrumb.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| href | 链接的目的地 | string | - | |
| overlay | 下拉菜单的内容 | Menu | () => Menu | - |
routes
ts
interface Route {
path: string
breadcrumbName: string
children?: Array<{
path: string
breadcrumbName: string
}>
}1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
和 browserHistory 配合
和 vue-router 一起使用时，默认生成的 url 路径是带有 # 的，如果和 browserHistory 一起使用的话，你可以使用 itemRender 属性定义面包屑链接。
vue
<template>
<g-breadcrumb :routes="routes">
<template #itemRender="{ route, params, routes, paths }">
<span v-if="routes.indexOf(route) === routes.length - 1">
{{ route.breadcrumbName }}
</span>
<router-link v-else :to="`/${paths.join('/')}`">
{{ route.breadcrumbName }}
</router-link>
</template>
</g-breadcrumb>
</template>1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12