Ant Design Vue Breadcrumb 面包屑组件

Ant Design Vue Breadcrumb 面包屑导航组件，通过这个组件可以告诉用户，当前所在的路径和当前位置，使用方法比较简单。

基础用法

<a-breadcrumb>
    <a-breadcrumb-item>首页</a-breadcrumb-item>
    <a-breadcrumb-item><a href="">产品管理</a></a-breadcrumb-item>
    <a-breadcrumb-item><a href="">产品详情</a></a-breadcrumb-item>
 </a-breadcrumb>

带图标和分隔符

<a-breadcrumb separator=">">
    <a-breadcrumb-item href="">
        <a-icon type="home" />
    </a-breadcrumb-item>
    <a-breadcrumb-item href="">
        <a-icon type="user" />
        <span>Application List</span>
    </a-breadcrumb-item>
    <a-breadcrumb-item>
        Application
    </a-breadcrumb-item>
</a-breadcrumb>

自定义分隔符

设置slot="separator"，就可以通过style自定义分隔符

<a-breadcrumb>
    <span slot="separator" style="color: red">-></span>
    <a-breadcrumb-item>Home</a-breadcrumb-item>
    <a-breadcrumb-item href="">Application Center</a-breadcrumb-item>
    <a-breadcrumb-item href="">Application List</a-breadcrumb-item>
    <a-breadcrumb-item>An Application</a-breadcrumb-item>
</a-breadcrumb>

在线试一试