Laravel and Vuejs: how to use vuejs in laravel multi page application - laravel

Question

i have a multiple pages application that i build in Laravel, i want to use Vuejs in some parts of the application.i have six modules customers,invoice,products,stocks,dashboard,analysis.
The customers,products,stock are just basic crud so i use Laravel.
How to do i turn the invoice,analysis,dashboard in single page applications. i have tried but when i use chromes back arrow to redirect back, i get 404|page not found.
this is my invoice/index.blade.php file, it loads everything corrently
<div class="row">
<div class="col-md-12">
<invoice-index></invoice-index>
</div>
</div>
inside my component, when i click on any link i a 404 error. i have tried router-link , 'a href' none is redirecting me to invoiceform
<template>
<div class="row">
<div class="col-md-12">
<div class="tile">
<div class="row pb-3">
<div class="col-md-12">
<div class="tile-header">
new Invoice
</div>
</div>
</div>
<div class="tile-body">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th> # </th>
<th style="with:20%"> Date </th>
<th> Number </th>
<th> Customer </th>
<th> Due Date </th>
<th> Total </th>
<th style="width:100px; min-width:100px;" class="text-center text-danger"><i class="fa fa-bolt"> </i></th>
</tr>
<tr v-for="invoice in allInvoices" :key="invoice.id" class="py-0 text-center" >
<td class="align-middle py-0">
<a href="#" class="nav-link text-info font-weight-bold">
{{ invoice.id }}
</a>
</td>
<td style="width: 10%">{{invoice.date}}</td>
<td >{{invoice.number}}</td>
<td >{{invoice.customer_id}}</td>
<td >{{invoice.due_date}}</td>
<td >{{invoice.total}}</td>
<td class="text-center">
<div class="btn-group" role="group" aria-label="Second group">
<i class="fa fa-edit"></i>
<i class="fa fa-trash"></i>
</div>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
I this is my routes
const router = new VueRouter({
routes: [
{
path:'/dashboard',
component: DashboardComponent
},
{
path:'/invoices',
component: InvoiceIndex
},
{
path:'/invoices/create',
component: InvoiceForm
}
],
mode:'history'
});

Answer 1

For SPA with Vue.js, You must define links using vue-router. When defined routes using vue-router, you can use your vue.js routes and only calls components. So you can build SPA. You can find details on here.
https://router.vuejs.org/
I hope it helps you. But It can be hard to implement if you are new on Vue.js