Laravel和Vuejs：如何在Laravel多页应用程序中使用Vuejs

我有一个在Laravel中构建的多页面应用程序，我想在应用程序的某些部分使用Vuejs。我有六个模块：客户、发票、产品、股票、仪表板和分析。 客户、产品、库存都是基本的积垢，所以我使用了Laravel

如何在单页应用程序中打开发票、分析和仪表板。我已经试过了，但当我使用chromes back arrow重定向回时，我发现404页没有找到

这是我的invoice/index.blade.php文件，它正确加载所有内容

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

---

}))

对于带有Vue.js的SPA，必须使用

Vue路由器定义链接。当使用vue路由器定义路由时，您可以使用vue.js路由并仅调用组件。这样你就可以做水疗了。你可以在这里找到详细信息


我希望它能帮助你。但如果您是Vue.js的新手，则很难实现

   <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>

 const router = new VueRouter({
routes: [

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

],
mode:'history'