如何解决在 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 条件更改根模板。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。