Breadcrumb 组件

面包屑：显示当前页面在系统层级结构中的位置，并能向上返回。

何时使用

当系统拥有超过两级以上的层级结构时；
当需要告知用户『你在哪里』时；
当需要向上导航的功能时。

基本

最简单的用法。

<template>
    <kl-bread-crumb>
        <kl-bread-crumb-item> Home</kl-bread-crumb-item>
        <kl-bread-crumb-item><a href="../../../">Application Center</a></kl-bread-crumb-item>
        <kl-bread-crumb-item>
            <a href="../../data-display/list/list.html">Application List</a></kl-bread-crumb-item
        >
        <kl-bread-crumb-item> An Application</kl-bread-crumb-item>
    </kl-bread-crumb>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>

使用路由的

和 vue-router 进行结合使用。(安装 vue-router 后，自行在 route 配置文件里配置路由即可实现效果)

<template>
    <kl-bread-crumb separator="/">
        <kl-bread-crumb-item> Home</kl-bread-crumb-item>
        <kl-bread-crumb-item to="/Button">Application Center</kl-bread-crumb-item>
        <kl-bread-crumb-item to="#"> Application List</kl-bread-crumb-item>
        <kl-bread-crumb-item> An Application</kl-bread-crumb-item>
    </kl-bread-crumb>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>

分隔符

用separator=">"可以自定义分隔符。

<template>
    <kl-bread-crumb separator=">">
        <kl-bread-crumb-item>Home</kl-bread-crumb-item>
        <kl-bread-crumb-item><a href="">Application Center</a> </kl-bread-crumb-item>
        <kl-bread-crumb-item>Application List</kl-bread-crumb-item>
        <kl-bread-crumb-item>An Application</kl-bread-crumb-item>
    </kl-bread-crumb>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss"></style>

带有图标的

图标放在文字前面。

<template>
    <kl-bread-crumb separator="/">
        <kl-bread-crumb-item>
            <KlSystemAdmin />
        </kl-bread-crumb-item>
        <kl-bread-crumb-item><a href="">Application Center</a></kl-bread-crumb-item>
        <kl-bread-crumb-item><a href="">Application List</a> </kl-bread-crumb-item>
        <kl-bread-crumb-item> An Application</kl-bread-crumb-item>
    </kl-bread-crumb>
</template>

<script setup lang="ts">
import { KlSystemAdmin } from '@kl-design/icons'
</script>

<style scoped lang="scss"></style>

API

参数	说明	类型	默认值
separator	分隔符自定义	string	'/'

参数	参数	类型	默认值
to	路由跳转目标，同 vue-router 的 to 属性	string/object	-
replace	如果设置该属性为 true, 导航将不会留下历史记录	boolean	-

Breadcrumb 组件 #

何时使用 #

基本 #

使用路由的 #

分隔符 #

带有图标的 #

API #

Breadcrumb.Item #

何时使用

基本

使用路由的

分隔符

带有图标的

API

Breadcrumb.Item