SvelteKit中查询字符串过滤失效，如何解决？

1. 替换自定义参数解析，用SvelteKit内置方法 #

你当前基于url.href自定义解析参数的方式容易出错，SvelteKit的url对象自带searchParams属性，直接用它获取参数更可靠：

修改+page.server.ts中的参数获取逻辑：

export async function load({ params, url }: LoadInput): Promise<LoadResponse> {
    console.log('clicked')
    // 替换resolveSearchParam，直接使用内置searchParams
    const pageNum = url.searchParams.get('page') || '1';
    const category = url.searchParams.get('category') || '';
    const role = url.searchParams.get('role') || '';
    const nickname = url.searchParams.get('nick_name') || '';
    const projectId = params.project_id;

    const result = await fetchSearchUser(role, nickname, category, pageNum, projectId);

    if (isFailure(result)) {
        throw error(404, {
            message: 'Failed to get users',
            code: 'NOT_FOUND'
        });
    }

    console.log(result.data)

    return {
        users: result.data
    };
}

2. 确保页面组件正确响应式渲染数据 #

检查你的+page.svelte组件是否正确绑定并渲染load返回的users数据：

<script lang="ts">
    export let users; // 接收服务端load返回的数据
</script>

<!-- 用响应式语法渲染列表 -->
{#each users as user}
    <div>{user.nick_name}</div>
{/each}

如果users数据更新时引用未发生变化（比如后端返回的是同一引用的数组），Svelte可能无法检测到变化，可以用{#key}强制重新渲染：

{#key users}
    {#each users as user}
        <div>{user.nick_name}</div>
    {/each}
{/key}

3. 修复goto的参数编码问题 #

输入框内容如果包含特殊字符（空格、中文等），直接拼接URL会导致参数传递错误，需要用encodeURIComponent编码：

async function handleSearchEvent(
    event: CustomEvent<{ role: string; category: string; input: string }>
) {
    const { role, category, input } = event.detail;
    // 对所有参数进行URL编码
    const encodedParams = new URLSearchParams({
        category,
        role,
        project_id: _projectId,
        nick_name: input,
        page: '1'
    });

    goto(`?${encodedParams.toString()}`);
}

4. 检查页面缓存配置 #

如果页面设置了预渲染或缓存策略，会导致数据无法动态更新。检查+page.server.ts或+page.svelte中是否有以下代码：

export const prerender = true; // 预渲染会生成静态页面，无法动态更新

如果存在，将其改为export const prerender = false;。

5. 验证返回数据结构匹配 #

确认fetchSearchUser返回的result.data结构和组件渲染逻辑一致，比如字段名是否匹配（组件用user.nick_name，后端返回的是否也是该字段），数据是否为数组类型。可以在load函数中打印result.data的完整结构，排查字段不匹配问题。

内容的提问来源于stack exchange，提问作者Jay0813