🫤

Laravel、Inertiaのページ遷移

2023/12/28に公開

`AuthenticatedLayout.vue`のメニューバーを活用してページ遷移する方法

ナビゲーションが書いてあるコードはのコメントが書いてある部分。
レスポンシブ用はの下にある。

resources\js\Layouts\AuthenticatedLayout.vue

<NavLink :href="route('purchases.create')" :active="route().current('purchases.create')">購入画面</NavLink>

route('purchases.create')にした場合resources\js\Pages\Purchases\Create.vueのページが表示される。

resources\js\Layouts\AuthenticatedLayout.vue

<NavLink :href="route('analysis')" :active="route().current('analysis')">データ分析</NavLink>

route('analysis')とした場合、resources\js\Pages\Analysis.vue（Pagesフォルダの直下）が表示される。

php artisan make:controller AnalysisControllerを実行したとして

コントローラーを読み込む

use App\Http\Controllers\AnalysisController;
Route::get('analysis', [AnalysisController::class, 'index'])->name('analysis');

app\Http\Controllers\AnalysisController.phpに追記

class AnalysisController extends Controller
{
    public function index()
    {
        return Inertia::render('Analysis');
    }
}