面试题：SvelteKit 路由中等难度面试题

Question

在 SvelteKit 中，如何实现基于动态参数的路由？请详细说明路由文件的结构以及如何在组件中获取这些动态参数。

Answer 1

1. 路由文件结构：
   • 在 SvelteKit 项目中，要实现基于动态参数的路由，在 src/routes 目录下创建以方括号包裹动态参数名的文件或目录。例如，如果要创建一个接受动态 id 参数的路由，可以创建一个文件 src/routes/products/[id].svelte。这里 [id] 就是动态参数，代表产品的唯一标识符。
   • 如果需要多层动态路由，比如 src/routes/products/[category]/[id].svelte，[category] 和 [id] 都是动态参数，分别代表产品类别和产品的唯一标识符。
2. 在组件中获取动态参数：
   • 在对应的 Svelte 组件（如 [id].svelte）中，可以通过 $page.params 来获取动态参数。
   • 示例代码如下：

<script>
    import { page } from '$app/stores';
    import { derived } from 'svelte/store';

    const params = derived(page, ($page) => $page.params);
    let id;
    params.subscribe((value) => {
        id = value.id;
    });
</script>

<p>The product id is {id}</p>

在上述代码中，首先从 $app/stores 引入 page 存储，它包含了当前页面的相关信息。然后通过 derived 创建一个新的存储 params，该存储的值来自 page.params。接着，通过订阅 params 存储来获取 id 参数的值，并在页面中显示出来。