環境
Laravel 8.5.15
Laravel Breeze
前提・実現したいこと
Laravelのbladeを使用し、ページの作成をしています。
レイアウトは、header + main + footerのような構成を考えています。
ページはGETリクエストで、遷移させる予定です。
http://localhost/
http://localhost/page2
ページ遷移の際、header, footerに変更が無い作りなので、
header, footerの再読み込みを行いたくありません。(見た目上だけでも)
発生している問題・エラーメッセージ
header + mainのレイアウトでテストを行っていますが、
ページの切り替えを行った際、header(下記のmyHeader.blade.php)が毎回再描画されてしまいます。
こちらVueのSPA、ルーティングのように、URLを変えつつページの一部が変更しているように見せたいのですが、いい手法はありますでしょうか。
言い方を変えると、HTTPのフレームを指定したページ遷移をURL変更を行い、bladeで実現したいです。
ヒントだけでもお教えていただけると幸いです、何卒よろしくお願いします。
該当のソースコード
file: src/routes/web.php
(略) Route::get('/', [MyController::class, 'topPage']); Route::get('/page2', [MyController::class, 'subPage']); (略)
file: src/app/Http/Controllers/MyController.php
php
1<?php 2 3namespace App\Http\Controllers; 4 5use Illuminate\Http\Request; 6 7class MyController extends Controller 8{ 9 // 10 public function topPage(){ 11 return view('portal.index'); 12 } 13 14 public function subPage(){ 15 return view('portal.page2'); 16 } 17}
file: src/resources/views/portal/index.blade.php
<x-portal-layout> home画面です <a href="/page2">ページ2に移動</a> </x-portal-layout>
file: src/resources/views/portal/page2.blade.php
<x-portal-layout> page2です <a href="/">HOMEに移動</a> </x-portal-layout>
file: src/app/View/Components/PortalLayout.php
<?php namespace App\View\Components; use Illuminate\View\Component; class PortalLayout extends Component { /** * Get the view / contents that represents the component. * * @return \Illuminate\View\View */ public function render() { return view('layouts.portal'); } }
file: src/resources/views/layouts/portal.blade.php
<!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> (略) </head> <body> @include('layouts.myHeader') <div class="font-sans text-gray-900 antialiased"> {{ $slot }} </div> </body> </html>
file: src/resources/views/layouts/myHeader.blade.php
<div> ヘッダーです </div>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/12/27 01:14