面试题：Svelte动态路由中如何实现参数传递与捕获

Question

在Svelte的动态路由场景下，阐述如何将参数从一个页面传递到另一个页面，并在目标页面捕获这些参数。请结合代码示例说明，例如如何通过URL传递一个用户ID并在对应的页面获取该ID。

Answer 1

在Svelte的动态路由场景下，可以通过以下方式传递和捕获参数：

1. 定义动态路由

假设使用 svelte - routing 库，在路由配置中定义动态路由。例如：

import { Router, Route } from '@sveltejs/routing';

const routes = [
    {
        path: '/user/:userId',
        component: () => import('./UserPage.svelte')
    }
];

const router = new Router({ routes });

2. 传递参数

在链接中通过URL传递参数，例如：

<a href="/user/123">查看用户123</a>

3. 捕获参数

在目标页面（UserPage.svelte）中捕获参数：

<script>
    import { page } from '@sveltejs/routing';

    const userId = $page.params.userId;
</script>

<h1>用户ID: {userId}</h1>

在上述代码中，通过 $page.params 获取到URL中的参数，userId 即为从URL中捕获的用户ID。如果使用其他路由库，原理类似，只是获取参数的方式可能略有不同。例如在 svelte - kit 中，在页面脚本中可以这样获取参数：

<script context="module">
    export function load({ params }) {
        return {
            props: {
                userId: params.userId
            }
        };
    }
</script>

<script>
    export let userId;
</script>

<h1>用户ID: {userId}</h1>