Laravel и Vuejs: как использовать vuejs в laravel многостраничном приложении

Question

У меня есть многостраничное приложение, которое я создаю Laravel, я хочу использовать Vuejs в некоторых частях приложения. У меня шесть модулей: клиенты, счета, продукты, акции, панель инструментов, анализ. Клиенты, продукты, запасы просто базовые c crud, поэтому я использую Laravel.

Как мне сделать так, чтобы счет-фактура, аналитика, панель инструментов в одностраничных приложениях. Я пытался, но когда я использую стрелку возврата chromes для перенаправления назад, я получаю страницу 404 | не найдена.

это мой файл invoice / index.blade. php, он загружает все соответственно

       <div class="row">
          <div class="col-md-12">
            <invoice-index></invoice-index>
          </div>
      </div>

внутри моего компонента, когда я нажимаю на любую ссылку, ошибка 404. я попробовал ссылку на маршрутизатор, 'a href' никто не перенаправляет меня на 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">
                    <a href="/invoices/create" class="btn btn-primary pull-right">new Invoice</a>
                </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">
                            <a href="#" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i></a>
                            <a href="#" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>
                            </div>
                        </td>

                    </tr>
                </thead>
            </table>

             </div>
         </div>
  </div>

I, это мои маршруты

 const router = new VueRouter({
routes: [

    {
        path:'/dashboard',
        component: DashboardComponent
    },
    {
        path:'/invoices',
        component: InvoiceIndex
    },
    {
        path:'/invoices/create',
        component: InvoiceForm
    }

],
mode:'history'

});

Answer 1

Для SPA с Vue. js, Вы должны определить ссылки, используя vue-router. Когда определены маршруты с использованием vue-router, вы можете использовать свои vue. js маршруты и только компоненты вызовов. Таким образом, вы можете построить СПА. Вы можете найти подробности здесь.

https://router.vuejs.org/

Надеюсь, это поможет вам. Но это может быть трудно реализовать, если вы новичок в Vue. js