Menghubungkan Link Menggunakan Vue Router Untuk SPA Laravel+Vue

Bagian penting dari pengembangan Single Page Application (SPA) atau aplikasi satu halaman adalah Router, maka dalam hal ini vue menyediakannya secara resmi dalam bentuk component yang dinamakan vue-router. mari kita jelajahi bagaimana menggunakan paket vue-router dalam catatan kali ini untuk di implementasikan pada web.

Baca Sebelumnya:

• Installasi Laravel Bersama Vue JS

Tahap pertama ialah menginstallasi vue-router dengan cara ketikkan perintah berikut ini:

npm install vue-router --save

setelah installasi selesai jangan lupa untuk menjalankan npm run watch agar apa yang kita ubah pada script langsung terkompile.

pada halaman welcome.blade laravel kita akan membuat beberapa link yaitu:

• Dashboard
• Customers
• Items
• Suppliers
• Receivings
• Sales

agar pada saat melakukan klik pada link dan perpindahan halaman tidak melakukan loading pada browser maka kita akan lakukan tahap-tahap sebagai berikut:

buatlah secara manual sebuah file yang bernama routes.js pada folder resources/assets/js

yang isi kodenya sebagai berikut:

dan buat component vue yaitu beberapa file yang sesuai dengan link yang akan digunakan adapun file-filenya adalah:

• Dashboard.vue
• Customers.vue
• Items.vue
• Suppliers.vue
• Receiving.vue
• Sales.vue

yang scriptnya berisi seperti contoh dibawah ini, pada file Dashboard.vue yang dapat dicopy dan di pastekan pada file yang lain dan dirubah isi pesannya.

kemudian pada file app.js di resources/assets/js sematkan kode berikut:

juga berikut ini

berikut script lengkapnya:

kemudian pada file welcome.blade.php pada folder resources/views buat script seperti dibawah ini

adapun script lengkapnya sebagai berikut:

dan script pada file menu.blade.php pada folder resources/views/layouts ialah:

setelah semu tahap-tahapan diatas selesai dilakukan buka browser untuk menjalankan proyek sehingga akan terlihat hasilnya seperti pada tampilan layar video berikut ini:

Note:
karena pada router vue menggunakan mode: 'history' untuk menghilangkan tanda # pada alamat url maka tambahkan script router ini pada router laravel dalam hal ini web.php yang ada di folder routes agar ketika halaman direfresh manual tidak terjadi error (1/1) NotFoundHttpException in RouteCollection.php (line 179). maka tambahkan lah script berikut ini:

Selanjutnya Baca:

• Menambah Data Ke Database Menggunakan SPA Laravel & Vue JS