创建第一个自定义页面

#监听实时更新，关闭终端就停止更新，需要按ctrl+c
npm run dev

进入 resources/js/Pages/ 目录创建页面文件resources/js/Pages/hello.vue

<script setup>
// 引入 Inertia 的 Link 组件，它相当于 <a> 标签，但支持 SPA 无刷新跳转
import { Head, Link } from '@inertiajs/vue3';
</script>

<template>
    <div class="min-h-screen flex items-center justify-center bg-gray-100">
        <div class="bg-white p-8 rounded-lg shadow-lg max-w-md w-full text-center">
            <h1 class="text-2xl font-bold text-gray-800 mb-4">
                🎉 恭喜你！
            </h1>
            <p>
                这是你的第一个 Inertia.js 页面。
            </p>
        </div>
    </div>
</template>

在routes/web.php创建一个路由

use Inertia\Inertia; //引入 Inertia

// 定义一个 /hello 路由
Route::get('/hello', function () {
    // Inertia::render('hello') 会自动去寻找 resources/js/Pages/hello.vue
    return Inertia::render('hello', [
        // 你可以在这里传数据给前端，就像以前传变量给 Blade 一样
        'appName' => '我的 Laravel 应用'
    ]);
});