breadcrumb.md

Breadcrumb 面包屑导航

用法

基础用法

::: tip 通过传递separator，来实现自定义的分隔符，默认是/。 :::

首页 活动管理 活动列表 活动详情

html代码：

<mooc-breadcrumb separator="/">
  <mooc-breadcrumb-item>首页</mooc-breadcrumb-item>
  <mooc-breadcrumb-item>活动管理</mooc-breadcrumb-item>
  <mooc-breadcrumb-item>活动列表</mooc-breadcrumb-item>
  <mooc-breadcrumb-item>活动详情</mooc-breadcrumb-item>
</mooc-breadcrumb>

To&Replace 路由链接

::: tip 通过to，设置面包屑活动项的调整路径，它同vue-router中的to一样;通过设置replace为true，实现路由跳转时，不向history 中添加新记录。 :::

首页 活动管理 活动列表 活动详情

html代码：

<mooc-breadcrumb separator="/">
  <mooc-breadcrumb-item to="/home">首页</mooc-breadcrumb-item>
  <mooc-breadcrumb-item :to="{ path: '/home' }">活动管理</mooc-breadcrumb-item>
  <mooc-breadcrumb-item to="/home">活动列表</mooc-breadcrumb-item>
  <mooc-breadcrumb-item to="/home" replace>活动详情</mooc-breadcrumb-item>
</mooc-breadcrumb>

SeparatorIcon 自定义分隔符图标样式

::: tip 可以通过separator-icon，来实现自定义的图标。 :::

首页 活动管理 活动列表 活动详情

html代码：

<mooc-breadcrumb separator-icon="iconfont iconyou">
  <mooc-breadcrumb-item to="/home">
    首页
  </mooc-breadcrumb-item>
  <mooc-breadcrumb-item :to="{ path: '/home' }">
    活动管理
  </mooc-breadcrumb-item>
  <mooc-breadcrumb-item to="/home">
    活动列表
  </mooc-breadcrumb-item>
  <mooc-breadcrumb-item to="/home">
    活动详情
  </mooc-breadcrumb-item>
</mooc-breadcrumb>

属性

Breadcrumb属性

属性名称	类型	默认值	说明
separator	String	/	分隔符
separatorIcon	String	-	自定义分隔符的图标样式，可以设置基于iconfont的图标。

BreadcrumbItem属性

属性名称	类型	默认值	说明
to	[Object, String]	-	vue-router的to是一样的用法，支持传递对象或者字符串路由。
replace	Boolean	false	活动项路由跳转时，是否向history中写入记录，设置true表示不写入。

<style lang="stylus"> .breadcrumb-container margin: 30px 0; </style>