面试题：SvelteKit布局路由与嵌套路由的数据传递

从布局路由向嵌套路由传递数据的方法

通过上下文（Context API）
- 在SvelteKit中，可以使用setContext和getContext来传递数据。在布局路由组件（如__layout.svelte）中，使用setContext设置数据：

<script>
    import { setContext } from'svelte';
    const userLoginStatus = { isLoggedIn: true, userInfo: { name: 'John' } };
    setContext('userLoginStatus', userLoginStatus);
</script>

- 在嵌套路由组件中，使用`getContext`获取数据：

<script>
    import { getContext } from'svelte';
    const userLoginStatus = getContext('userLoginStatus');
</script>

通过路由参数
- 在布局路由中，可以将数据作为路由参数传递给嵌套路由。例如，在布局路由中导航到嵌套路由时：

<script>
    const userLoginStatus = { isLoggedIn: true, userInfo: { name: 'John' } };
    const navigateToNested = () => {
        const stringifiedData = JSON.stringify(userLoginStatus);
        // 假设嵌套路由路径为 /layout/nested
        const url = `/layout/nested?data=${stringifiedData}`;
        // 使用SvelteKit的导航方法
        navigate(url);
    };
</script>
<button on:click={navigateToNested}>Navigate to Nested</button>

- 在嵌套路由组件中获取参数：

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

    const userLoginStatusStore = derived(page, ($page) => {
        const data = $page.url.searchParams.get('data');
        return data? JSON.parse(data) : null;
    });
</script>

嵌套路由获取并响应式使用全局数据

使用上下文的响应式
- 当使用上下文传递数据时，若数据本身是响应式的（如Svelte的writable store），嵌套路由组件会自动响应数据变化。例如：

// 布局路由 __layout.svelte
<script>
    import { setContext, writable } from'svelte';
    const userLoginStatus = writable({ isLoggedIn: true, userInfo: { name: 'John' } });
    setContext('userLoginStatus', userLoginStatus);
</script>

// 嵌套路由组件
<script>
    import { getContext } from'svelte';
    const userLoginStatus = getContext('userLoginStatus');
</script>
{#if $userLoginStatus.isLoggedIn}
    <p>Welcome, {$userLoginStatus.userInfo.name}</p>
{/if}

使用路由参数的响应式
- 对于通过路由参数传递的数据，若要实现响应式，可以使用derived store结合page store。每次路由变化时，page store会更新，从而触发derived store重新计算。

可能遇到的问题及解决方案

上下文命名冲突
- 问题：如果不同模块使用相同的上下文名称，可能会导致数据覆盖。
- 解决方案：使用唯一的上下文名称，例如使用项目相关的前缀，如myProject_userLoginStatus。
路由参数传递复杂数据
- 问题：通过路由参数传递复杂数据，可能导致URL过长，且数据解析和序列化存在潜在风险。
- 解决方案：对于复杂数据，优先考虑使用上下文传递。若必须使用路由参数，可对数据进行适当压缩或使用ID引用的方式，在嵌套路由中根据ID获取完整数据。
数据更新不及时
- 问题：在某些情况下，布局路由中的数据更新后，嵌套路由组件没有及时响应。
- 解决方案：确保数据是响应式的（如使用writable store），并且在数据更新时正确触发更新机制。如果使用上下文传递的是非响应式数据，需要手动通知嵌套路由组件更新。

面试题：SvelteKit布局路由与嵌套路由的数据传递

知识考点

面试题答案

从布局路由向嵌套路由传递数据的方法

嵌套路由获取并响应式使用全局数据

可能遇到的问题及解决方案