Pada materi sebelumnya kita telah membuat file-file yang kita butuhkan untuk membuat Nested Router untuk melihat materi sebelum nyateman-teman bisa klik pada link https://kursuswebprogramming.com/cara-membuat-nested-router-menggunakan-laravel-dan-vue-js/ pada materi Cara Melakukan Konfigurasi Nested Router Menggunakan Laravel dan Vue.js kali ini kita akan melakukan konfigurasi untuk melakukan Nested Routernya.

Langkah pertama silahkan teman-teman buka file router.js, pada file router.js tersebut nantinya akan tersimpan semua router-router yang kita buat, yang berfungsi untuk menghendel atau menghubungkan semua component vue.js.

Untuk menghubungkan file tersebut silahkan teman-teman buka file router.js kita akan import package dan file component yang akan kita gunakan untuk scriptnya seperti dibawah ini :

Berikutnya kita akan extract alias dari vue router tersebut kedalam vue.js dengan perintah seperti dibawah ini :

Keterangan:

Export default new Route({…}) merupakan nama inisial dari package vue-router, berikutnya untuk routing-routing tersebut nantinya akan di simpan kedalam variable routes yang berfungsi untuk mewalikan semua routing yang terdapat di dalamnya, begitu juga dengan property children yang berfungsi untuk menandakan url atau path yang di dalamnya.

Selanjutnya kita akan import router yang telah kita buat, dan kita juga akan mendefinisikan property dengan nama router pada file app.js untuk scriptnya seperti dibawah ini :

Berikutnya kita akan membuat sebuah file pada views dengan nama nestedRouter.blade.php untuk scriptnya seperti dibawah ini :

Cara Membuat Nested Router Menggunakan Laravel dan Vue.js

Pada script diatas terdapat id template yang berfungsi untuk menghubungkan template blade laravel dengan component yang terdapat pada vue.js.

Oke teman-teman itulah pembahasan kita tentang Cara Melakukan Konfigurasi Nested Router Menggunakan Laravel dan Vue.js kita akan lanjutkan pada tutorial berikutnya cara menampilkan data dengan menggunakan Nested Router.

Terima kasih.

WhatsApp chat