Svelteki api 获取页面

Question

简而言之，我想从一个 API 我制作的不同页面中获取数据。

API 是 https://joao-back-ecommerce-prod.herokuapp.com/store/，如您所见，我有多个端点。

使用 svelte，我尝试通过一次单击从一页转到另一页。

例如：


<script context="module">
    export async function load({ fetch, page }) {
        const id = page.params.id;
        const res = await fetch(
            `https://joao-back-ecommerce-prod.herokuapp.com/store/products/?page=${id}`
        );
        const products = await res.json();
        console.log(products);

        if (res.ok) {
            return {
                props: {
                    products: products.results
                }
            };
        }
        return {
            status: res.status,
            error: new Error('Could not fetch the results')
        };
    }
</script>

<script>
    export let products;
    export let id = 1;

    const next = () => {
        id++;
    };
</script>

<ul>
    {#each products as product}
        <li>
            {product.title} - {product.description}
            <a href={product.id}>hlmlll</a>
        </li>
    {/each}
    <button on:click={next}>Next</button>
</ul>

我想在点击下一步按钮时转到下一页。我认为增加 id + 1 会起作用，但是，它不会。

在浏览器中，当我更改页码时它起作用了。

有什么帮助吗？

Answer 1

你只是改变了一个局部变量，它不会影响url。您要做的是通过更改 url.

导航到下一页

有两种方法可以做到这一点：

import { goto } from '$app/navigation';
const next = () => goto(`/product/${id+1}`); // change to get correct path for you

或者，更好的方法实际上只是 link 到下一页：

<a href="/product/{id+1}">Next</a>

第二个选项是首选，因为您实际上正在导航，您应该使用 link（按钮用于操作），如果用户禁用了 javascript，它也可以工作。

SvelteKit 实际上不会去服务器加载新页面，它只会从 load 函数中获取数据并进行相应更新，用户不会注意到他们在不同的页面上，只会url 变化。

Svelteki api 获取页面

Svelteki api fetch pages

api

sveltekit