Post Detail

Breadcrumb adalah component penting pada aplikasi karena dengan breadcrumb sebuah aplikasi akan semakin hidup fungsinya sebuah program. Adapun contoh breadcrumb nya saya lampirkan gambar di bawah ini untuk yang akan di hasilkan.

Gambar diatas menunjukan bahwa breadcrumb sedang pada Realisasi Anggaran, nah kali ini kita akan membuatnya secara dynamic breadcrumb nya. 

Pastikan sudah menggunakan fungsi route pada vue, karena kita akan memasukan Nama Breadcrumb pada route lalu kita akan meload nya.

{
            path: "/budget-realization",
            component: BudgetRealization,
            meta: {
                requiresAuth: true,
                breadcrumb: [
                    { name: 'Home', link: 'home', home: 'home'},
                    { name: 'Master Data' },
                    { name: 'Realisasi Anggaran', active: 'active' }
                ],
                pageTitle: "Realisasi Anggaran"
            }
        }

Nah codingan diatas adalah codingan yang buat breadcrumb otomatis, lalu selanjutnya buat Component dengan nama Breadcrumb.vue

Lalu untuk script pada Breadcrumb component adalah sebagai berikut :

Lalu pada App.vue panggil component nya biar di load 

Nah pada script vue nya sebagai berikut :

import Breadcrumbs from './components/Breadcrumbs.vue'
    export default{
        components: {
            Breadcrumbs
        }
    }

Selesai dah, semoga bermanfaat.