SvelteKit开发考勤应用：如何携带分组ID跳转至学生页面？

下面是几种实用的实现方式，结合你的Prisma+SQLite场景：

1. 使用路由参数（推荐，RESTful风格） #

这种方式把班级ID嵌入URL，直观且刷新页面不会丢失参数，完全适配你的业务场景。

步骤1：定义带参数的路由 #

在src/routes下创建路由结构：

src/routes/
└── classes/
    └── [classId]/
        └── students/
            ├── +page.svelte
            └── +page.server.js（可选，用于服务器端加载数据）

路由路径会变成/classes/{班级ID}/students，比如/classes/1/students。

步骤2：班级列表页面跳转 #

用SvelteKit的goto函数跳转，传入带班级ID的路由：

<script>
  import { goto } from '$app/navigation';
  // 假设classes是从Prisma获取的班级列表数据
  export let classes;
</script>

{#each classes as classItem}
  <div class="class-item" on:click={() => goto(`/classes/${classItem.id}/students`)}>
    {classItem.name}
  </div>
{/each}

步骤3：学生页面获取班级ID并加载数据 #

客户端加载：

<script>
  import { page } from '$app/stores';
  import { prisma } from '$lib/server/prisma'; // 你的Prisma实例
  import { onMount } from 'svelte';

  let classId = $page.params.classId;
  let students = [];

  async function loadStudents() {
    students = await prisma.student.findMany({
      where: { classId }
    });
  }

  onMount(async () => {
    await loadStudents();
  });
</script>

<h2>班级{$page.params.classId}的学生列表</h2>
<!-- 学生添加/编辑/删除组件 -->

服务器端加载（推荐，更安全且SEO友好）：

在+page.server.js中编写load函数：

import { prisma } from '$lib/server/prisma';
import { error } from '@sveltejs/kit';

export async function load({ params }) {
  const classId = params.classId;
  // 先验证班级是否存在（可选）
  const targetClass = await prisma.class.findUnique({ where: { id: classId } });
  if (!targetClass) {
    throw error(404, '班级不存在');
  }
  // 获取该班级的学生
  const students = await prisma.student.findMany({
    where: { classId }
  });
  return { students, classId };
}

然后在+page.svelte中直接使用：

<script>
  export let data;
  // data里包含students和classId
</script>

<h2>班级{data.classId}的学生列表</h2>
{#each data.students as student}
  <!-- 学生项 -->
{/each}

2. 使用查询参数（适合临时传递场景） #

如果不想修改路由结构，可以用URL查询参数传递班级ID。

班级列表页面跳转： #

<script>
  import { goto } from '$app/navigation';
  export let classes;
</script>

{#each classes as classItem}
  <div on:click={() => goto(`/students?classId=${classItem.id}`)}>
    {classItem.name}
  </div>
{/each}

学生页面获取参数： #

客户端加载：

<script>
  import { page } from '$app/stores';
  import { prisma } from '$lib/server/prisma';
  import { onMount } from 'svelte';

  let classId = $page.url.searchParams.get('classId');
  let students = [];

  onMount(async () => {
    if (classId) {
      students = await prisma.student.findMany({ where: { classId } });
    }
  });
</script>

服务器端加载：

import { prisma } from '$lib/server/prisma';
import { error } from '@sveltejs/kit';

export async function load({ url }) {
  const classId = url.searchParams.get('classId');
  if (!classId) {
    throw error(400, '缺少班级ID参数');
  }
  const students = await prisma.student.findMany({ where: { classId } });
  return { students, classId };
}

3. 使用goto的state参数（不推荐，刷新丢失） #

这种方式把班级ID存在浏览器会话状态里，刷新页面后会丢失，仅适合不需要持久化的临时跳转。

班级列表页面跳转： #

<script>
  import { goto } from '$app/navigation';
  export let classes;
</script>

{#each classes as classItem}
  <div on:click={() => goto('/students', { state: { classId: classItem.id } })}>
    {classItem.name}
  </div>
{/each}

学生页面获取state： #

<script>
  import { page } from '$app/stores';
  import { prisma } from '$lib/server/prisma';
  import { onMount } from 'svelte';

  let classId = $page.state.classId;
  let students = [];

  onMount(async () => {
    if (classId) {
      students = await prisma.student.findMany({ where: { classId } });
    }
  });
</script>

总结 #

优先选择路由参数的方式，它符合RESTful设计规范，URL清晰可分享，且刷新页面不会丢失参数，完全适配你需要基于班级ID进行学生管理的业务场景。

内容的提问来源于stack exchange，提问作者IslamZaoui