创建第一个自定义页面

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

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

<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 class="text-gray-600 mb-6">
        这是你的第一个 Inertia.js 页面。
      </p>
      
      <!-- 使用 Inertia 的 Link 组件进行无刷新跳转 -->
      <Link href="/dashboard" class="text-blue-500 hover:underline">
        返回首页 / 登录
      </Link>
    </div>
  </div>
</template>

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

在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 应用'
    ]);
});