SvelteKit同路由下如何从+page.svelte向+page.js传额外参数

你不想通过URL查询参数传递limit和skip，同时实现加载更多的需求，有两种实用方案可以实现：

方案1：客户端直接调用数据获取逻辑 #

如果你的Store.get方法可以在客户端运行（比如是调用外部公开API），可以直接在页面组件中处理后续加载逻辑，无需再和+page.js交互：

修改后的+page.js #

import { Store } from '@models'

/** @type {import('./$types').PageServerLoad} */
export async function load() {
    // 初始化默认参数
    const limit = 10;
    const skip = 0;
    const res = await Store.get(limit, skip);
    return {
        store: res,
        currentSkip: skip,
        limit: limit
    };
};

修改后的+page.svelte #

<script>
    export let data;
    let products = data.store;
    let currentSkip = data.currentSkip;
    const limit = data.limit;

    async function loadMore() {
        currentSkip += limit;
        // 直接调用数据获取方法
        const newProducts = await Store.get(limit, currentSkip);
        // 合并新数据到现有列表
        products = [...products, ...newProducts];
    }
</script>

{#each products as product}
    <div>{product.title}</div>
{/each}
<button on:click={loadMore}>Load More</button>

方案2：创建专属API路由（适用于服务端专属数据逻辑） #

如果Store.get只能在服务端运行（比如直接操作数据库），可以创建一个同路径的+server.jsAPI路由，专门处理数据请求，页面通过fetch调用该路由，不会修改页面URL：

创建+server.js #

import { Store } from '@models';
import { json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export async function GET({ url }) {
    const limit = Number(url.searchParams.get('limit')) || 10;
    const skip = Number(url.searchParams.get('skip')) || 0;
    const res = await Store.get(limit, skip);
    return json(res);
}

修改后的+page.svelte #

<script>
    export let data;
    let products = data.store;
    let currentSkip = 0;
    const limit = 10;

    async function loadMore() {
        currentSkip += limit;
        // 调用同路径的API路由，查询参数仅用于API内部，不会显示在页面URL
        const response = await fetch(`?limit=${limit}&skip=${currentSkip}`);
        const newProducts = await response.json();
        products = [...products, ...newProducts];
    }
</script>

{#each products as product}
    <div>{product.title}</div>
{/each}
<button on:click={loadMore}>Load More</button>

这两种方案都能满足你不修改页面URL、传递参数加载更多数据的需求，可根据你的数据逻辑运行环境选择。

内容的提问来源于stack exchange，提问作者Rüzgar