Breadcrumb 面包屑

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

何时使用

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

代码演示

基本

最简单的用法。

<template>
  <f-breadcrumb>
    <f-breadcrumb-item>Home</f-breadcrumb-item>
    <f-breadcrumb-item><a href="">Application Center</a></f-breadcrumb-item>
    <f-breadcrumb-item><a href="">Application List</a></f-breadcrumb-item>
    <f-breadcrumb-item>An Application</f-breadcrumb-item>
  </f-breadcrumb>
</template>

<script lang="ts" setup>

</script>

API

参数	说明	类型	可选值	默认值
itemRender	自定义链接函数，和 vue-router 配置使用， 也可使用 #itemRender="props"	({route, params, routes, paths}) => vNode		-
params	路由的参数	object		-
routes	router 的路由栈信息	routes[]		-
separator	分隔符自定义	string|slot		'/'

Breadcrumb.Item

参数	参数	类型	默认值	版本
href	链接的目的地	string	-	1.5.0
overlay	下拉菜单的内容	Menu | () => Menu	-	1.5.0

事件

事件名称	说明	回调参数	版本
click	单击事件	(e:MouseEvent)=>void	-	1.5.0