面试题：SvelteKit动态路由中如何获取并处理单个动态参数

Question

在SvelteKit项目中，假设存在一个动态路由页面`[id].svelte`，请描述如何在该页面中获取`id`参数，并将其用于从API获取对应的数据。

Answer 1

1. 获取id参数：
   • 在SvelteKit的[id].svelte页面中，可以通过$page.params来获取动态路由参数id。首先需要从$app/stores中导入page存储：

   <!-- [id].svelte -->
   import { page } from '$app/stores';
   import { onMount } from'svelte';
   let id;
   $: {
       $page.params.id && (id = $page.params.id);
   }
   

2. 使用id从API获取数据：
   • 可以在onMount生命周期函数中发起API请求。假设我们使用fetch来获取数据，代码如下：

   <script>
       import { page } from '$app/stores';
       import { onMount } from'svelte';
       let data;
       let id;
       $: {
           $page.params.id && (id = $page.params.id);
       }
       onMount(async () => {
           if (id) {
               const response = await fetch(`your - api - url/${id}`);
               if (response.ok) {
                   data = await response.json();
               } else {
                   console.error('Failed to fetch data');
               }
           }
       });
   </script>
   

   • 在上述代码中，your - api - url需要替换为实际的API地址。当页面加载时（onMount），如果获取到了id，就会向API发送请求，请求的URL包含id参数，然后根据响应结果处理数据。如果请求成功，将数据存储在data变量中，可在页面中进一步使用。