面试题：SvelteKit页面路由的参数处理与动态路由

Question

假设你在SvelteKit项目中需要创建一个动态路由，该路由接收一个用户ID参数，并根据此参数从后端获取相应的用户数据进行展示。请详细说明实现步骤，包括路由定义、如何在组件中获取参数以及如何进行数据请求。

Answer 1

1. 路由定义： 在SvelteKit项目中，动态路由通过在路由文件的文件名中使用方括号来定义。例如，创建一个src/routes/user/[id].svelte文件，这里的[id]就是动态参数，表示用户ID。

2. 在组件中获取参数： 在[id].svelte组件中，可以通过$page.params来获取动态参数。在组件的<script>标签内：

<script>
    import { page } from '$app/stores';
    const { id } = $page.params;
</script>

3. 进行数据请求： 可以使用fetch API来向后端请求数据。结合上述获取到的id，示例如下：

<script>
    import { page } from '$app/stores';
    const { id } = $page.params;
    let userData;
    const fetchUserData = async () => {
        try {
            const response = await fetch(`/api/users/${id}`);
            if (response.ok) {
                userData = await response.json();
            } else {
                console.error('Failed to fetch user data');
            }
        } catch (error) {
            console.error('Error fetching user data:', error);
        }
    };
    fetchUserData();
</script>

{#if userData}
    <p>User Name: {userData.name}</p>
    <!-- 展示其他用户数据 -->
{:else}
    <p>Loading user data...</p>
{/if}

上述代码中，假设后端API的路径为/api/users/${id}，获取到数据后根据实际数据结构展示在页面上。如果请求失败或正在加载，则显示相应提示信息。