Laravelを使ったページ遷移で、ヘッダをリロードさせない方法

環境

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">ページ２に移動</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件

ベストアンサー

PHP
1$html = view('users.edit', compact('user'))->render();

render()関数を通じてbladeの内容を得ることができます。
APIを通じてrenderの結果をhtmlとしてページに表示するのはどうですか？

投稿2021/12/24 12:46

skys215

総合スコア910

退会済みユーザー

2021/12/27 01:14

ご回答ありがとうございます！実現できそうです！ありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！