Laravel 和 Vuejs：如何在 laravel 多页面应用程序中使用 vuejs答案

【问题标题】：Laravel and Vuejs: how to use vuejs in laravel multi page applicationLaravel 和 Vuejs：如何在 laravel 多页面应用程序中使用 vuejs
【发布时间】：2020-06-08 13:21:42
【问题描述】：

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

如何在单页应用程序中打开发票、分析、仪表板。我试过了，但是当我使用 chromes 后退箭头重定向回来时，我得到 404|page not found.

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

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

在我的组件中，当我点击任何链接时，我会出现 404 错误。我试过 router-link ，'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>

这是我的路线

 const router = new VueRouter({
routes: [

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

],
mode:'history'

});

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

对于带有 Vue.js 的 SPA，您必须使用 vue-router 定义链接。当使用vue-router 定义路由时，你可以使用你的 vue.js 路由并且只调用组件。所以你可以建立SPA。您可以在此处找到详细信息。

https://router.vuejs.org/

希望对你有帮助。但是如果你是 Vue.js 的新手，这可能很难实现

【讨论】：