전역적으로 사용하기 때문에 따로 변수를 넘길 필요는 없습니다.
composer require diglactic/laravel-breadcrumbs
php artisan vendor:publish --tag=breadcrumbs-configcomposer require robertboes/inertia-breadcrumbs
php artisan vendor:publish --tag="inertia-breadcrumbs-config"- route 기반으로 breadcrumbs 선언
<?php // routes/breadcrumbs.php
// Note: Laravel will automatically resolve `Breadcrumbs::` without
// this import. This is nice for IDE syntax and refactoring.
use Diglactic\Breadcrumbs\Breadcrumbs;
use Diglactic\Breadcrumbs\Generator as BreadcrumbTrail;
// This import is also not required, and you could replace `BreadcrumbTrail $trail`
// with `$trail`. This is nice for IDE type checking and completion.
// Home
Breadcrumbs::for('home', function (BreadcrumbTrail $trail) {
$trail->push(__('Home'), route('home'));
});
Breadcrumbs::for('admin.memberships.index', function (BreadcrumbTrail $trail) {
$trail->parent('home');
$trail->push('연간회원', route('admin.memberships.index'));
});- Breadcrumbs vue-component
<!-- resources/js/Components/Breadcrumbs.vue -->
<script setup>
import { usePage } from '@inertiajs/vue3'
import { computed } from 'vue'
const breadcrumbs = computed(() => usePage().props.breadcrumbs || [])
</script>
<template>
<nav aria-label="breadcrumb" class="mb-3">
<ol v-if="breadcrumbs" class="breadcrumb breadcrumb-arrows">
<li
v-for="page in breadcrumbs"
class="breadcrumb-item"
:class="{ active: page.current }"
>
<span v-if="page === '/'">/</span>
<a v-else :href="page.url" aria-current="page">{{ page.title }}</a>
</li>
</ol>
</nav>
</template>- 사용예
<script setup>
import Layout from '@/Layouts/Tabler/Layout.vue'
import { Head } from '@inertiajs/vue3'
import Breadcrumbs from '@/Components/Breadcrumbs.vue'
</script>
<template>
<Head title="home" />
<Layout>
<div class="page-body">
<div class="container-xl">
<Breadcrumbs />
</div>
</div>
</Layout>
</template>
안녕하세요