更新记录

1.0.0（2026-08-15） 下载此版本

1.0.0\n\n- 首次发布\n- 支持路由模式与非路由模式\n- 支持自定义分隔符、颜色、滚动动画\n- 支持前后缀元素\n- 支持超长省略

平台兼容性

uni-app(4.0)

dm-breadcrumb 面包屑导航

安装

方式 A：easycom 自动注册（推荐）

在 HBuilderX 插件市场搜索 dm-breadcrumb 点击「导入插件」，或直接将 dm-breadcrumb 目录放到项目的 uni_modules/ 下。

项目根目录/
└── uni_modules/
    └── dm-breadcrumb/
        └── components/dm-breadcrumb/
            └── dm-breadcrumb.vue   ← 入口文件名必须叫 dm-breadcrumb.vue

easycom 会自动扫描并注册，使用时无需 import，直接使用 <dm-breadcrumb> 即可。

方式 B：npm 安装（可选）

npm install @harbymail/dm-breadcrumb

npm 方式需要手动引入组件：

<script>
import DmBreadcrumb from '@harbymail/dm-breadcrumb';

export default {
  components: { DmBreadcrumb }
};
</script>

基础用法

<template>
  <dm-breadcrumb :data="list" />
</template>

<script>
export default {
  data() {
    return {
      list: [
        { label: '首页', name: 'home', to: '/pages/index/index' },
        { label: '详情', name: 'detail', to: '/pages/detail/index' }
      ]
    };
  }
};
</script>

路由模式

默认 router="true"，数据项需提供 to 字段，点击时调用 uni.navigateTo 跳转。

<dm-breadcrumb :data="routes" active-color="#333" />

非路由模式

router="false"，配合 v-model 控制当前激活项。

<dm-breadcrumb
  v-model="activeName"
  :router="false"
  :data="list"
  id-field="name"
  @item-click="onClick" />

Props

Events

Slots

三种分隔符

<!-- 文本分隔符 -->
<dm-breadcrumb separator="/" :data="list" />

<!-- CSS 箭头分隔符 -->
<dm-breadcrumb separator=">" :data="list" />

<!-- 图标字体分隔符 -->
<dm-breadcrumb separator-class="my-icon arrow-right" :data="list" />

自定义颜色 & 超长省略

<dm-breadcrumb
  color="#999"
  active-color="#e74c3c"
  :ellipsis="true"
  :data="list" />

前后缀

<dm-breadcrumb
  :data="list"
  :prefix="{ label: '根目录' }"
  :suffix="{ label: '当前' }" />

数据格式

[
  { label: '首页', name: 'home', to: '/pages/index/index' },
  { label: '分类', name: 'category' },
  { label: '详情', name: 'detail', to: '/pages/detail/index' }
]

• label：显示文字（对应 textField）
• name：唯一标识（对应 idField）
• to：路由跳转路径（路由模式必填）