🫤

Laravel、Inertiaのページ遷移

に公開
Vue 3
Inertia
Laravel 9
tech

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


ナビゲーションが書いてあるコードは<!-- Navigation Links -->のコメントが書いてある部分。
レスポンシブ用は<!-- responsive Navigation Menu -->の下にある。

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フォルダの直下）が表示される。

web.phpにルートを追加

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');
    }
}

Discussion