Sveltekit 加载功能问题答案

【问题标题】：Sveltekit load function issueSveltekit 加载功能问题
【发布时间】：2022-01-24 06:51:09
【问题描述】：

我是网络开发领域的新手，我开始学习 svelte。我目前正在观看关于 sveltekit 的教程。我试图在页面呈现给用户之前加载一个函数，但我收到了这个错误。

page in load functions has been replaced by url and params
Error: page in load functions has been replaced by url and params
at Object.get (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1084:12)
    at load ([id].svelte:2:36)
    at load_node (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1094:30)
    at respond$1 (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1296:21)
    at async render_page (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1487:19)
    at async resolve (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1641:10)
    at async respond (file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1607:20)
    at async file:///Users/username/Documents/Projects/Web%20Development/my-pokadex/node_modules/@sveltejs/kit/dist/chunks/index.js:1937:24

这是给我这个错误的代码

<script context="module">
    export async function load({page}) {
        const id = page.params.id;
        const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
        const res = await fetch(url);
        const pokeman = await res.json();
        return {props: {pokeman}};
    }
</script>
<script>
    export let pokeman;
</script>
<h1>{pokeman.name}</h1>

我的依赖项

npm 版本：6.14.15
节点版本：v14.18.0

package.json

{
  "name": "my-pokadex",
  "version": "0.0.1",
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
    "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "autoprefixer": "^10.4.2",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-svelte3": "^3.2.1",
    "prettier": "^2.4.1",
    "prettier-plugin-svelte": "^2.4.0",
    "svelte": "^3.44.0",
    "tailwindcss": "^3.0.15"
  },
  "type": "module"
}

我正在关注的教程：https://www.youtube.com/watch?v=UU7MgYIbtAk&t=3010s@47:31

【问题讨论】：

标签： javascript web sveltekit

【解决方案1】：

错误状态page in load functions has been replaced by url and params 在文档中快速搜索here

产生这个sn-p

export async function load({ params, fetch, session, stuff }) {
    const url = `/blog/${params.slug}.json`;
    const res = await fetch(url);

    if (res.ok) {
        return {
            props: {
                article: await res.json()
            }
        };
    }

    return {
        status: res.status,
        error: new Error(`Could not load ${url}`)
    };
}

您可以直接在load()中使用params

您可以将代码重构为

<script context="module">
    export async function load({params}) {
        const id = params.id;
        const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
        const res = await fetch(url);
        const pokeman = await res.json();
        return {props: {pokeman}};
    }
</script>
<script>
    export let pokeman;
</script>
<h1>{pokeman.name}</h1>

【讨论】：