面试题：SvelteKit动态路由中嵌套动态路径的处理与参数传递

Question

SvelteKit应用中有这样的嵌套路由结构：`/parent/[parentId]/child/[childId]`。请说明如何设置路由配置以正确处理这种嵌套动态路径，并且在`child.svelte`组件中如何获取`parentId`和`childId`，同时要考虑如何将这些参数传递给子组件进行进一步的数据加载或操作。

Answer 1

1. 路由配置：
   • 在SvelteKit项目中，这种嵌套路由结构可以通过在项目的src/routes目录下创建相应的文件夹结构来实现。
   • 创建src/routes/parent/[parentId]/child/[childId].svelte文件。SvelteKit会自动识别这种文件夹和文件名的约定，将其作为动态路由处理。
2. 在child.svelte组件中获取参数：
   • 在child.svelte组件中，可以使用$page.params来获取动态参数。假设使用的是SvelteKit的+page.svelte模式（SvelteKit 1.0及以上推荐）。

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

   • 如果是在旧版本的SvelteKit中使用[childId].svelte文件，可以这样获取：

   <script>
   export let params;
   const { parentId, childId } = params;
   </script>
   

3. 将参数传递给子组件：
   • 假设child.svelte中有一个子组件SubComponent.svelte，可以通过属性传递参数。

   <script>
   import { page } from '$app/stores';
   import SubComponent from './SubComponent.svelte';
   const { parentId, childId } = $page.params;
   </script>
   
   <SubComponent {parentId} {childId} />
   

   • 在SubComponent.svelte中接收参数：

   <script>
   export let parentId;
   export let childId;
   // 在这里可以基于parentId和childId进行数据加载或操作
   </script>