66 lines
1.7 KiB
Markdown
66 lines
1.7 KiB
Markdown
|
|
|||
|
|
## 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)
|