readme.md 1.7 KB
Newer Older
M
MicroMilo 已提交
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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

## breadcrumb 面包屑导航
> **组件名:uni-breadcrumb**
> 代码块: `ubreadcrumb`

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

### 安装方式

本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范,`HBuilderX 2.5.5`起,只需将本组件导入项目,在页面`template`中即可直接使用,无需在页面中`import`和注册`components`

如需通过`npm`方式使用`uni-ui`组件,另见文档:[https://ext.dcloud.net.cn/plugin?id=55](https://ext.dcloud.net.cn/plugin?id=55)

### 基本用法

``template`` 中使用组件

```html
<uni-breadcrumb separator="/">
	<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">{{route.name}}</uni-breadcrumb-item>
</uni-breadcrumb>
```

```js
export default {
		name: "uni-stat-breadcrumb",
		data() {
			return {
				routes: [{
					to: '/A',
					name: 'A页面'
				}, {
					to: '/B',
					name: 'B页面'
				}, {
					to: '/C',
					name: 'C页面'
				}]
			};
		}
	}
```


## API

### Breadcrumb Props

|属性名			|类型	|默认值	|说明				|
|:-:			|:-:	|:-:	|:-:				|
|separator		|String	|斜杠'/' |分隔符				|
|separatorClass	|String	|		|图标分隔符 class	    |

### Breadcrumb Item Props

|属性名	|类型			|默认值	|说明																			|
|:-:	|:-:			|:-:	|:-:																			|
|to		|String     	|		|路由跳转页面路径           														|
|replace|Boolean		|		|在使用 to 进行路由跳转时,启用 replace 将不会向 history 添加新记录(仅 h5 支持)         |




## 组件示例

点击查看:[https://hellouniapp.dcloud.net.cn/pages/extUI/breadcrumb/breadcrumb](https://hellouniapp.dcloud.net.cn/pages/extUI/breadcrumb/breadcrumb)