Pada materi sebelumnya kita telah berhasil menginstal package vue router teman-teman bisa lihat pada https://kursuswebprogramming.com/cara-install-package-vue-router-pada-framework-laravel/ seperti yang kita ketahui bahwa cara kerja dari package vue router tersebut mengacu kepada url path yang nantinya kita tentukan untuk menghubungkan dari setiap component melalui url browser, dan dari url path tersebut nantinya dapat menjadi identitas untuk menghubungkan setiap components pada materi kali ini kita akan membahas tentang bagaimana Menjalankan Package Vue Router Pada Framework Laravel yang telah berhasil kita install.

Untuk Menjalankan Package Vue Router Pada Framework Laravel langkah pertama kita akan import package vue router yang telah kita install sebelumnya pada resources/js/app.js seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

Selanjutnya kita akan membuat sebuah file pada views dengan nama vueRouter.blade.php yang di dalamnya terdapat tag router-link dan tag router-view untuk scriptnya seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

router-link tersebut merupakan sebuah fungsi dari vue.js yang berfungsi untuk mengarahkan kita ke halaman yang kita pilih, dan router-views berfungsi untuk menampilkan halaman atau page yang kita pilih dari route-link

Berikutnya kita akan menentukan component dari setiap constant yang kita buat pada resources/js/app.js seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

Selanjutnya kita akan membuat constant routes yang berfungsi untuk mengarahkan kesetiap component seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

Kemudian kita akan melakukan instansiasi untuk routernya seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

Berikutnya untuk menjalankan pada browser kita juga harus setting route yang terdapat pada routes/web.php untuk scriptnya seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

Selanjutnya silahkan teman-teman ketikan pada terminalnya npm run watch seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

Kemudian kita akan jalankan servernya dengan mengetikan php artisan serve pada terminalnya seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

Jika semua prosesnya berhasil kita akan jalankan pada browser maka akan tampil seperti dibawah ini :

Menjalankan Package Vue Router Pada Framework Laravel

Jika menunya klik maka akan tampil sesuai dengan halaman yang dipilih, oke teman-teman itulah pembahasan kita tentang Menjalankan Package Vue Router Pada Framework Laravel.

Semoga bermanfaat.

Terima kasih.

WhatsApp chat