mirror of
https://gitee.com/huangge1199_admin/vue-pro.git
synced 2024-11-24 08:11:55 +08:00
1.7 KiB
1.7 KiB
breadcrumb 面包屑导航
组件名:uni-breadcrumb 代码块:
ubreadcrumb
显示当前页面的路径,快速返回之前的任意页面。
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
如需通过npm
方式使用uni-ui
组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55
基本用法
在 template
中使用组件
<uni-breadcrumb separator="/">
<uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">{{route.name}}</uni-breadcrumb-item>
</uni-breadcrumb>
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