Svetekit加载功能问题

Question

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

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

Answer 1

错误状态为page in load functions has been replaced by url and params如所示，在文档中进行快速搜索

产生这个片段

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>