Breadcrumb (麵包屑導航) 元件。它們展示了如何透過麵包屑來顯示網站的導航路徑。每段代碼展示了不同的方式來自定義麵包屑的顯示和行為。

The shortest way to do many things is to only one thing at a time.
做許多事情的捷徑就是一次只做一件事。

template模板部分:

<template>
    <div class="card flex justify-content-center">
        <Breadcrumb :home="home" :model="items">
            <template #item="{ item }">
                <a class="cursor-pointer" :href="item.url">
                    <span :class="item.icon"></span>
                </a>
            </template>
            <template #separator> / </template>
        </Breadcrumb>
    </div>
</template>

1. Breadcrumb 元件:
   • :home="home"：首頁的圖示
   • :model="items"：傳遞多個麵包屑項目的數組（items）
2. #item 插槽

<template #item="{ item }">
....
</template>

自定義每個麵包屑項目的顯示方式,，透過 item 對象訪問該項目的資料。
3. #separator 插槽：
定義項目之間的分隔符，這裡是用 / 符號。

Script 部分：

<script setup>
import { ref } from "vue";

const home = ref({ icon: 'pi pi-home' });
const items = ref([
    { icon: 'pi pi-sitemap' }, 
    { icon: 'pi pi-book' }, 
    { icon: 'pi pi-wallet' }, 
    { icon: 'pi pi-shopping-bag' }, 
    { icon: 'pi pi-calculator' }
]);
</script>

• home：頁圖示的物件 pi pi-home 圖示類。
• items：一個包含多個項目的陣列

增加 Router ， tmpelte部分：

 <template #item="{ item, props }">
    <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
      <a :href="href" v-bind="props.action" @click="navigate">
            <span :class="[item.icon, 'text-color']" />
            <span class="text-primary font-semibold">{{ item.label }}</span>
      </a>
    </router-link>
     <a v-else :href="item.url" :target="item.target" v-bind="props.action">
       <span class="text-color">{{ item.label }}</span>
      </a>
</template>

#item 插槽：

• { item, props }：
  -插槽內部獲取 item 和 props。
  -item 包含該麵包屑項目的資料，props 包含了行為屬性。
• router-link 生成內部導航鏈接:
  -router-link：當 item.route 存在時，使用 router-link 進行內部導航。
  -Vue Router 的 href 和 navigate 方法。

參考資料:
https://v3.primevue.org/breadcrumb/