在 Svelte 中实现路由

1<script>
2  import { state } from '../state'
3  import Header from '../components/Header.svelte'
4
5  export let id;
6
7  const student = $state.students.find(student => [id, Number(id)].includes(student.id));
8</script>
9
10<Header />
11学生详情页面：{id}

1student.id === id || student.id === Number(id)

1// 需要更新静态图片路径，确保正确提供服务
2'filter.svg' -> '/filter.svg'
3'svelte.svg' -> '/svelte.svg'

代码应如下所示：

1<Link to={`/details/${student.id}`} class="text-primary">
2  {student.name}
3</Link>

代码应如下所示：

1<Link to={`/details/${student.id}`} class="text-primary">
2  {student.name}
3</Link>

1<script>
2  import { link, links } from 'svelte-routing'
3</script>
4
5<!-- 在锚标签上使用 use:link -->
6<a href="/" use:link>列表</a>
7<a href="/details" use:link>详情</a>
8
9<!-- 在父元素上使用 use:links -->
10<div use:links>
11  <a href="/">列表</a>
12  <a href="/details">详情</a>
13</div>