面试题：Svelte路由系统中如何实现动态路由参数的获取与使用

Question

在Svelte搭建的路由系统里，假设我们有一条动态路由路径为 `/user/:id`，请描述如何获取这个 `id` 参数，并在组件中展示该用户的相关信息（假设可以通过一个函数 `getUserInfo(id)` 获取用户信息）。

Answer 1

1. 获取 id 参数：
   • 在 Svelte 路由组件中，可以通过 $page.params 来获取动态路由参数。对于路径 /user/:id，可以这样获取 id：

   <script>
   import { page } from '$app/stores';
   $: $page?.params?.id;
   let userId = $page?.params?.id;
   </script>
   

2. 展示用户相关信息：
   • 利用获取到的 id，调用 getUserInfo(id) 函数获取用户信息并展示。假设 getUserInfo 返回一个 Promise，示例如下：

   <script>
   import { page } from '$app/stores';
   let userInfo;
   $: $page?.params?.id;
   let userId = $page?.params?.id;
   async function fetchUserInfo() {
       if (userId) {
           try {
               userInfo = await getUserInfo(userId);
           } catch (error) {
               console.error('Error fetching user info:', error);
           }
       }
   }
   $: fetchUserInfo();
   </script>
   
   {#if userInfo}
       <p>Username: {userInfo.username}</p>
       <p>Email: {userInfo.email}</p>
   {:else}
       <p>Loading user info...</p>
   {/if}
   

   这里假设 getUserInfo 返回的 userInfo 对象有 username 和 email 等属性，根据实际的用户信息结构调整展示内容。