面试题：Svelte中动态路由参数传递与获取的实现方式

Question

在Svelte的动态路由场景下，例如有一个路由路径为/user/:id，如何在组件中正确传递并获取这个:id参数？请写出关键代码示例。

Answer 1

1. 传递 id 参数：
   • 在链接中传递 id 参数，假设你有一个列表，每个列表项对应不同的用户 id：

   {#each users as user}
       <a href={`/user/${user.id}`}>{user.name}</a>
   {/each}
   

2. 获取 id 参数：
   • 在 user 组件（对应 /user/:id 路由）中获取 id 参数，在 SvelteKit 中可以这样做：

   <script context="module">
       export function load({ params }) {
           return {
               props: {
                   id: params.id
               }
           };
       }
   </script>
   
   <script>
       export let id;
       console.log(`The user id is: ${id}`);
   </script>
   

   • 如果是普通 Svelte 应用（没有使用 SvelteKit），可以使用 svelte - routing 等路由库，以 svelte - routing 为例：

   <script>
       import { page } from 'svelte - routing';
       const id = page.params.id;
       console.log(`The user id is: ${id}`);
   </script>