如何在SvelteKit的load函数中实现动态查询适配Strapi过滤参数

解决思路 #

• 修复URL参数获取逻辑
  page.query 是URLSearchParams接口实例，不能直接通过属性名读取参数，需要使用get()方法获取对应参数值：

// 替换原来的 const term = page.query.term;
const term = page.query.get('term');

• 优化请求参数编码
  拼接请求链接时对搜索词进行URL编码，避免特殊字符导致接口请求异常：

const data = await fetch(`${url}?categories.name_contains=${encodeURIComponent(term)}`);

• 确保参数变化时触发load函数重新执行
  如果点击同路由不同参数的链接没有触发load更新，可将普通a标签跳转替换为SvelteKit提供的goto方法，强制刷新页面数据：
  首先修改PostList组件逻辑：

<script>
    import { goto } from '$app/navigation';
    export let post;

    function handleCategoryClick(name) {
        goto(`/search?term=${encodeURIComponent(name)}`, { invalidateAll: true });
    }
</script>
<!-- 原有代码省略，修改分类链接部分 -->
{#each post.categories as category (category.id)}
    <a role="button" on:click|preventDefault={() => handleCategoryClick(category.name)}>
        {category.name}
    </a>
{/each}

• 可选优化：增加空参数兜底逻辑
  在load函数中增加term为空的判断，避免无效请求：

export async function load({ page, fetch }) {
    const term = page.query.get('term');
    // 无搜索词时可根据业务需求返回全量数据或者抛出提示
    if (!term) {
        return { props: { posts: [] } };
    }
    // 原有请求逻辑保持不变
}

内容的提问来源于stack exchange，提问作者Ricardo de Paula