在 Laravel 8 和 Inertia 中为 Vue 使用 2 个不同的叶根模板？

问题描述

所以我正在使用 Inertia 和 Vue 开发 Laravel 8 应用程序。

这个想法是大部分页面都是 Laravel + Blade（有利于 SEO、快速加载等...），但是对于需要大量用户交互的选定页面，我在 Blade 模板中插入了一个 Vue 组件，其中互动需要发生。

使用 Inertia，这是通过在 Laravel Route 调用的 Controller 中使用 return Inertia::render('vueComponent') 调用 Vue 组件来完成的。数据可以传递给 Vue 实例，甚至传递给 Blade 模板，所以这很好（见下文）。

namespace App\Http\Controllers;
use Inertia\Inertia;

class RangePageController extends Controller
{
    public function show(string $lang='fr')
    {
        // Strip the trailing slash from $lang
        $lang = Str::before($lang,'/');

        return Inertia::render('Productsgallery',['bar' => "Hello World"])->withViewData(['lang' => $lang]);
    }
}

默认情况下，文件“/resources/views/app.blade.PHP”使用Vue组件替换@inertia指令（加上一些Vue数据）呈现。整洁。

默认使用 Blade 布局文件“app.blade.PHP”。该文档指定可以更改默认值：Inertia\Inertia::setRootView('name');。

问题：有没有办法在从Controller调用不同的页面时选择不同的Blade布局文件而不是改变默认值（并像上面那样注入Vue组件）？例如，我想为我的电子商务购物篮使用一种 Blade 布局，为我的管理页面使用另一种布局。比如一个页面选择“app1.blade.PHP”，另一个页面选择“app2.blade.PHP”。

非常感谢！ E.

解决方法

找到了一个解决方案，物有所值。

我创建了 2 个新的 /Http/Middleware，扩展了“HandleInertiaRequest.php” 中间件。
在每个扩展类中，我将“protected $rootView”设置为指向 /resources/views 中的自定义 Blade 布局文件。例如 protected $rootView = 'admin.app';，指向 /resources/views/admin/app.blade.php，“web”也一样 app.blade.php。
然后我在中创建第二个“管理员”中间件组 Kernel.php 复制“web”组中的列表，我替换默认的“\App\Http\Middleware\HandleInertiaWebRequests::class” 与扩展类（在“web”和“admin”组中）一致。
我在“routes”文件夹中创建了一个“admin”路由文件来托管将使用“admin”布局的路由。中的路线默认的“web”路由文件将使用位于“resources/views/web/”中的 Blade 布局。

可能有一些更好的解决方案，但这个似乎有效。

注意：我在 GitHub 上看到了一个讨论来做同样的事情，但另外还有 2 个不同的 Vue 实例：一个用于“web”，一个用于“admin”。不确定这会带来什么，但我仍在寻找一种方法！如果有人有想法...

只需稍微更新您的 HandleInertiaRequests

public function version(Request $request)
    {
        // Add the root view tho the version hash.
        // This forces inertia to make a hard reload when the template changes.
        return $this->rootView . parent::version($request);
    }

public function handle(Request $request,\Closure $next,$rootView = null)
    {
        if ($rootView) {
            $this->rootView = $rootView;
        }

        return parent::handle($request,$next);
    }

同时从全局中间件中删除 HandleInertiaRequests 并将其添加为命名中间件

    protected $routeMiddleware = [
         ...
        'inertia' => \App\Http\Middleware\HandleInertiaRequests::class,];

现在您可以根据需要填充路由、路由组

Route::group(['middleware' => ['Admin:Client.Dashboard.app']],function () {
    Route::get('/admin/dashboard',[
        'as'   => 'admin.dashboard','uses' => 'Admin\DashboardController@index',]);
});
Route::middleware('inertia:app')
    ->group(base_path('routes/auth.php'));

您可以使用属性和方法更改中间件（HandleInertiaRequest.php）中 interia 的根模板

// Set root template via property
protected $rootView = 'app';

// OR
// Set root template via method
public function rootView(Request $request)
{
    return 'app';
}

现在在 rootView() 方法中过滤请求，并根据需要使用简单的 if-else 条件更改根模板。

inertiajs laravel laravel laravel-blade vue.js