Breadcrumb 面包屑

基本使用

主页 产品列表 详细信息

separator属性，设置面包屑分割符，默认为“/”。to属性，为跳转路由，与router用法相同。

<template>
  <mist-breadcrumb separator="/">
    <mist-breadcrumb-item :to="{ path: '/' }">主页</mist-breadcrumb-item>
    <mist-breadcrumb-item>产品列表</mist-breadcrumb-item>
    <mist-breadcrumb-item>详细信息</mist-breadcrumb-item>
  </mist-breadcrumb>
</template>

Expand Copy Copy

自定义分隔符

主页 产品列表 详细信息

separatorClass属性，设置面包屑分割符，可使用iconfont自定义图标

<template>
  <mist-breadcrumb separatorClass="mi-icon-star">
    <mist-breadcrumb-item :to="{ path: '/' }">主页</mist-breadcrumb-item>
    <mist-breadcrumb-item>
      <a href="https://www.baidu.com">产品列表</a>
    </mist-breadcrumb-item>
    <mist-breadcrumb-item>详细信息</mist-breadcrumb-item>
  </mist-breadcrumb>
</template>

Expand Copy Copy

Breadcrumb选项

参数	类型	可选值	默认值	说明
separator	String	----	斜杠“/”	分隔符
separatorClass	String	----	----	自定义分隔符

Breadcrumb Item选项

参数	类型	可选值	默认值	说明
to	String/Object	----	----	路由跳转对象，同 vue-router 的 to