Implement Vue Router - History mode di Laravel?

Saya punya punya public page dan backend page, untuk backend saya pingin tetap menggunakan bladenya laravel. Tapi untuk public page/frontend saya ingin menerapkan full vue feature. Nah, ada kesulitan saat saya implement vue router.

Gimana caranya agar link backend tetap aktif dan frontend link sudah aktif di vue router? Untuk lebih jelasnya:

# web.php <a href='http://prntscr.com/lc5tzk '>http://prntscr.com/lc5tzk </a> saya sudah posisikan backend routes diatas route frontend, dan url backend berhasil saya akses tanpa Vue.

Tapi, untuk frontend route (sudah terpasang mode historynya), hanya menampilkan Blank. Ketika saya cek pake vue dengan 404 page, semua url route yang ada di frontend dibaca 404 oleh Vue routenya. Berikut kode routes frontend (laravel) & route frontend (vue):

# routes.php (frontend laravel) <a href='http://prntscr.com/lc5y3m '>http://prntscr.com/lc5y3m </a> Yang kotak merah, route untuk mengarahkan semua url frontend ke 1 file (app.blade -> ada vue). Yang kotak hijau, route frontend utamanya.

# app.js (route vue) <a href='http://prntscr.com/lc5ys2 '>http://prntscr.com/lc5ys2 </a>

Apakah ada yang salah atau kurang di settingannya?

# DONE Salah settingan di app.js bagian

base:'/'

Jadi,

base:location.pathname

avatar beckbella
@beckbella

68 Kontribusi 38 Poin

Diperbarui 5 tahun yang lalu

3 Jawaban:

bisa ceritakan lebih detail? (coba edit pertanyannya) contoh spesifik masalahnya apa dan kode kamu sekarang seperti apa

avatar hilmanski
@hilmanski

2670 Kontribusi 2132 Poin

Dipost 5 tahun yang lalu

Jawaban Terpilih

pisahkan route untuk front-end dan back-end di route milik laravel. arahkan route front-end ke main.js dimana kamu menyimpan vue-router nya

avatar lukmanfreedom
@lukmanfreedom

121 Kontribusi 55 Poin

Dipost 5 tahun yang lalu

@lukmanfreedom trims mas, sudah bisa.. tapi ada masalah baru, @hilmanrdn sudah saya update pertanyaannya,

avatar beckbella
@beckbella

68 Kontribusi 38 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban