带有 vue/vue 路由器的 Laravel 路由

Question

我基本上是使用 VueRouter 来创建我所有的路线，这些路线运行得非常好。但是，我的应用程序是使用 Laravel 构建的。因此，如果我刷新任何路由，我会收到一个错误，即路由未定义。因此，在每个控制器中，我都必须添加一个索引功能。这只是返回我的 app.blade 的视图，这只是通常的标签等，以及加载我的单页应用程序。我只是想知道是否有更清洁的解决方案？我想我可以将返回视图移动到单个控制器中并让我的控制器扩展它。但我只是想知道是否有更好的方法我错过了？

即我通过 VueRouter 的路线之一：

{
    path: "/clients",
    name: "clients",
    component: () => import(/* webpackChunkName: "clients" */ "../resources/js/components/Views/Clients/Clients.vue")
},

clients.php 文件中的路由

Route::get('/clients', [App\Http\Controllers\ClientController::class, 'index'])->name('clients');

然后是ClientController的索引函数

public function index()
{
    return view('app');
}

如果 app.blade 的加载在其他地方完成，并且不需要为每个控制器指定，那就太好了。任何帮助将不胜感激，以确保一切顺利完成！

谢谢！

Answer 1

这是我为我的一个项目解决此问题的方法，该项目也是 Vue 和 Laravel 中的单页应用程序：https://github.com/lyyka/laravel-vue-blog-spa/blob/master/routes/web.php

简单地说，在你的路由文件中，你把这个代码：

Route::get('/{any}', function () {
    return view('welcome');
})->where("any", ".*");

在我的欢迎视图中，我有：

@extends('layouts.app')

@section('content')
    <div class = "container">
        <router-view></router-view>
    </div>
@endsection

基本上，这将返回任何 URL 的应用视图，因此您的 Vue SPA 应该可以正常工作。通常，将回调函数放在路由文件中并不是一个好习惯，但在这种情况下，您甚至不会使用路由文件，因为它是一个 SPA，所以这个解决方案可以通过！ :)