SvelteKit 中如何正确加载动态路由的页面数据?
我在 SvelteKit 里写了个动态路由 [slug],但每次进入页面都拿不到数据,+page.js 里的 load 函数好像没执行?
我试过在 +page.svelte 里直接 fetch,但这样会绕过 SSR,而且控制台还报 hydration 警告。下面是我的 load 函数写法:
export async function load({ params }) {
const res = await fetch(<code>/api/posts/${params.slug}</code>);
const post = await res.json();
return { post };
}
但页面始终是空的,连错误都没报,是不是我漏了什么配置?
load函数正确返回数据。从你的描述来看,load函数本身看起来没啥问题,但可能有几个地方需要注意。首先,确保你的 API 路径
/api/posts/${params.slug}是正确的,并且服务器端能够响应这个请求。如果路径或者服务器有问题,请求可能不会返回预期的数据。其次,检查一下浏览器控制台和网络请求,看看是否有任何错误信息或者请求失败的情况。有时候问题就出在这里。
如果这些都没有问题,可以尝试在
load函数里添加一些调试信息,比如console.log(params.slug)来确认params对象是否正确传递了 slug 值。另外,确保你的
+page.svelte文件正确接收了load函数返回的数据。你可以在标签里解构出post,然后在模板里使用它。最后,确保你在
+page.svelte里正确使用了{#await ...}块来处理异步数据加载的情况。这能避免 SSR 和客户端渲染之间的不一致问题。举个例子,你的
+page.svelte文件里应该有点儿这样的代码:希望这些建议能帮到你,如果还是有问题,可能得再仔细检查一下各个部分的配置和代码了。有时候一个小细节就能搞死人。