laravel - 为 Vue 使用 2 个不同的 Blade 根模板,以及 Laravel 8 和 Inertia?

标签 laravel vue.js laravel-blade inertiajs

所以我正在开发一个带有 Inertia 和 Vue 的 Laravel 8 应用程序。
想法是大部分页面都是 Laravel + Blade(适合 SEO、快速加载等),但是对于需要大量用户交互的选定页面,我在需要交互的 Blade 模板中插入了一个 Vue 组件即将发生。
对于 Inertia,这是通过使用 return Inertia::render('vueComponent') 调用 Vue 组件来完成的。在 Laravel 路由调用的 Controller 中。数据可以传递给 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 布局文件(并像上面那样注入(inject) 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,“网络”也是如此
    app.blade.php。
  • 然后我创建了第二个“管理员”中间件组
    Kernel.php 复制“web”组中的列表,我替换
    默认的“\App\Http\Middleware\HandleInertiaWebRequests::class”
    与扩展类一致(在“web”和“admin”组中)。
  • 我在“路由”文件夹中创建了一个“管理员”路由文件来托管
    将使用“管理员”布局的路线。中的路线
    默认的“web”路由文件将使用位于“resources/views/web/”中的 Blade 布局。

  • 可能有一些更好的解决方案,但这一个似乎有效。
    注意:我在 GitHub 上看到过类似的讨论,但除了有 2 个不同的 Vue 实例:一个用于“web”,一个用于“admin”。不知道这会带来什么,但我仍在寻找一种方法来做到这一点!如果有人有想法...

    关于laravel - 为 Vue 使用 2 个不同的 Blade 根模板,以及 Laravel 8 和 Inertia?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66679747/

    相关文章:

    javascript - 从 vue-router 的链接获取 'id' 值

    html - Bootstrap 下拉菜单样式在下拉菜单中很奇怪

    laravel - 在 Laravel Blade 中转义 VueJS 数据绑定(bind)语法?

    php - Laravel Controller 不传递变量来查看

    php - Yajra 数据表全局搜索不起作用

    laravel - 如何使用 flysystem 将文件从一个存储桶传输到另一个存储桶?

    javascript - 如果数据库表修改,则实时更改 Vue 组件

    node.js - 如何从 Vue.js 组件连接到 socket.io?

    php - 如何从 Laravel 5.2 升级到 5.4?

    javascript - 如何在我的 Vue.js 项目中以横向模式打印 html 页面