javascript - Sveltekit 加载函数显然没有被调用

Question

我是 Svelte 和 Sveltekit 的新手，我正在开发一个非常基本的应用程序，其中包含一个页面，例如:

src/routes/categories/[slug]/+page.svelte

在另一个页面中，我有一个指向前面提到的页面的链接。当点击链接时，它成功地将我重定向到 [slug]/+page.svelte 并且我可以看到格式正确的 URL: http://localhost:5173/categories/test-6

现在，我尝试在加载页面时获取 URL 的 [slug] 部分。我正在浏览文档并阅读有关 load 函数的信息，因此我实现了:

<script context="module">

    /** @type {import('./$types').PageLoad} */
    export function load({params}) {
        console.log(params.slug);
        const slug = params.slug;
        return {
            slug
        };
    }
</script>

<script>
    let slug = undefined;
</script>


<h1>{slug}</h1>
wassap

但是当我访问该页面时，我只看到:

undefined
wassap

我什至没有看到我添加到 load 的日志语句。

我错过了什么？

NOTEL 我知道我也许可以使用 onMount 和 $page 并以其他方式访问参数，但我想使用 >加载，对我来说看起来干净多了。

谢谢

Answer 1

您的加载函数不应再位于 context="module" block 中，而应位于名为 +page.js 的单独文件中:

export function load({params}) {
  console.log(params.slug);
  const slug = params.slug;
  return {
    slug
  };
}

其结果被放置在一个对象data中，因此在+page.svelte中您现在将拥有:

<script>
  export let data;
</script>

<h1>{data.slug}</h1>