🍞 パンくずってなに？
「今、自分がどのページにいるか」を表示してくれる案内表示のことだよ！
例えばこんなふうに出るよ：
ホーム ＞ キッズ ＞ ゲーム ＞ ダンス
これは「ダンス」のページにいて、 「ホーム → キッズ → ゲーム → ダンス」って順番でここに来たんだよって教えてくれてる感じ！
なんで「パンくず」って名前なの？
昔話の「ヘンゼルとグレーテル」って森でみたいに、森で道に迷わないように、パンくずを道に落として目印にしたからそこから来てるらしい！！
そのアイディアから生まれたのが「パンくずリスト」🍞🌲
なんで使うの？
・ユーザーが「今どこにいるか」がすぐわかる！
・前の階層に戻りたいときも簡単！
・サイトがどんな構造になってるかが見える！
どうやって作るの？
Vueでコンポーネントにするとこういう感じになるよ：
<Breadcrumb :items="[
{ label: 'ホーム', href: '/' },
{ label: 'キッズ', href: '/kids' },
{ label: 'ゲーム', href: '/kids/game' },
{ label: 'ダンス', href: '' }
]" />
この items の中に「どこから来たか」を順番に並べあとはるらしい！
あとはコンポーネント側で並べて表示するだけ！
Vueコンポーネントでのパンくず：親→子→孫の関係
例えばこんな構成だったとする
App.vue ← 親コンポーネント(パン（要素）持ってるところ）
└ Page.vue ← 子コンポーネント
└ Breadcrumb.vue ← 孫コンポーネント
このとき「パンくずで表示する階層データ」は App.vue が持ってるとする！
const breadcrumbItems = [
{ label: "ホーム", href: "/" },
{ label: "キッズ", href: "/kids" },
{ label: "ゲーム", href: "/kids/game" },
];
それを Page.vue に渡して、さらに Breadcrumb.vue に渡すと、こういう形になる
App.vue
<Page :breadcrumbs="breadcrumbItems" />
Page.vue
（子コンポーネント）
<Breadcrumb :items="breadcrumbs" />
<script setup>
defineProps({ breadcrumbs: Array })
</script>
Breadcrumb.vue
（孫コンポーネント）
<template>
<nav>
<ul>
<li v-for="item in items">{{ item.label }}</li>
</ul>
</nav>
</template>
<script setup>
defineProps({ items: Array })
</script>
props を渡しながら「親→子→孫」でパンくず階層データを伝えていく感じ！
props を見ればどこからどう渡ってるかもちゃんと見えるから構造がわかりやすい！
breadcrumbItems ってなに？
これは「パンくず表示に使うデータ」をまとめた 配列（Array） なの。
中に入ってるオブジェクト
{ label: "ホーム", href: "/" }
は、「表示する名前」と「その階層のリンク先URL」をセットにしたもの！