Breadcrumb 麵包屑

展示當前頁面在層級中的路徑。支援自訂分隔符、長鏈路折疊與連結跳轉。

麵包屑

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <LhBreadcrumb>
      <LhBreadcrumbItem>首頁</LhBreadcrumbItem>
      <LhBreadcrumbItem>宋代繪畫</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'">范寬</LhBreadcrumbItem>
      <LhBreadcrumbItem>溪山行旅圖</LhBreadcrumbItem>
    </LhBreadcrumb>
    <LhBreadcrumb separator="/">
      <LhBreadcrumbItem>首頁</LhBreadcrumbItem>
      <LhBreadcrumbItem :to="'#'" replace>山水卷</LhBreadcrumbItem>
      <LhBreadcrumbItem>當前頁</LhBreadcrumbItem>
    </LhBreadcrumb>
    <p class="demo-note">maxItems 折疊長鏈路（首項 + 省略號 + 結尾項）</p>
    <LhBreadcrumb :max-items="3">
      <LhBreadcrumbItem>首頁</LhBreadcrumbItem>
      <LhBreadcrumbItem>館藏</LhBreadcrumbItem>
      <LhBreadcrumbItem>宋代</LhBreadcrumbItem>
      <LhBreadcrumbItem>范寬</LhBreadcrumbItem>
      <LhBreadcrumbItem>溪山行旅圖</LhBreadcrumbItem>
    </LhBreadcrumb>
  </div>
</template>

Breadcrumb Props

屬性	說明	類型	預設值
separator	分隔符字元	string	—
maxItems	最大可見項數（首項 + 省略號 + 結尾若干項），超出折疊；0 或不傳表示不折疊	number	—
sx	sx 快速佈局屬性	—	—

BreadcrumbItem Props

屬性	說明	類型	預設值
to	跳轉位址；存在且非末項時渲染為連結（偵測到 vue-router 時走路由跳轉，否則原生導覽）	string	—
replace	使用 vue-router 跳轉時是否以 replace 方式（無路由時無效果）	boolean	false

Slots

插槽	說明
BreadcrumbItem default	項文案
BreadcrumbItem separator	單項分隔符（優先於父級 separator）