- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
如何在 context="module"
和使用 {#await load()}
block 中访问页面参数 ?
如果我不使用{#await load()}
block 我不会收到错误并且页面正常工作,但如果我使用Await阻止我得到这个错误:*无法读取未定义的属性(读取“params”)*
(I have to mention that I can see the result of console.log in scripttag)
(I'm using Await block to load a spinner before completingthe content load)
这是代码:
<script context="module">
import { gql, GraphQLClient } from 'graphql-request';
export async function load(ctx) {
const pageSlug = await ctx.params.slug;
const graphcms = new GraphQLClient(import.meta.env.VITE_GRAPHCMS_URL, {
headers: {}
});
const getArticleQuery = gql`
query getArticle {
articles(filters: { Slug: { eq: "${pageSlug}" } }) {
data {
id
attributes {
Title
Slug
Content
FeaturedImage {
data {
attributes {
url
}
}
}
}
}
}
}
`;
const data = await graphcms.request(getArticleQuery);
if (data) {
return {
props: {
article: data.articles.data[0],
pageSlug: pageSlug
}
};
} else {
throw new Error(data);
}
}
</script>
<script>
import { Jumper } from 'svelte-loading-spinners';
export let article;
export let pageSlug;
$: console.log('pageSlug', pageSlug);
</script>
{#await load()}
<div class="flex justify-center items-center">
<Jumper size="60" color="#FF3E00" unit="px" duration="1s" />
</div>
{:then data}
<span>{article.attributes.Title}</span>
<span>{JSON.stringify(pageSlug)}</span>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
最佳答案
这不是 load
的工作方式。
load
函数在页面挂载之前运行,并将生成的 props 传递给页面。它将在您访问的第一个页面的服务器上运行,并在所有后续页面的客户端上运行。
如果您绝对需要在显示内容之前有一个加载微调器,则必须在客户端加载数据并单独加载客户端。这可以通过在 onMount
函数中加载数据来完成,但是您失去了服务器端呈现的好处。
关于server-side-rendering - 在 Sveltekit 上获取上下文 ="module"中的页面参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71198957/
我使用 import { MongoClient } from 'mongodb'; 导入了 mongodb,(mongodb 的版本是 4.0.0-beta.5)它在 svelte-kit dev
我正在尝试以通配符方式导入目录中图像的所有 url,有两个可能的扩展名: import urls from "../static/images/**/*.{png,svg}"; 目前该目录下有3个文件
我有一个 sveltekit 应用程序,我想检查用户是否有来自 cookie 的 accesstoken。我可以通过 event.request.headers.get('cookie'); 访问它并
注意:我已将我的 Sapper 应用程序迁移到 SvelteKit(下面的更新 3),因此现在正在寻找 SvelteKit 的解决方案。 我有多个使用 Sapper 构建的 MFE(微前端),它们位于
我最近试图在Vercel上部署一个SvelteKit项目库,但由于Vercel构建应用程序的方式,我编写的传递实用程序类并以编程方式调用TailWind的API端点无法工作。它在我的本地环境中运行得很
我最近试图在Vercel上部署一个SvelteKit项目库,但由于Vercel构建应用程序的方式,我编写的传递实用程序类并以编程方式调用TailWind的API端点无法工作。它在我的本地环境中运行得很
有人对 SvelteKit 有同样的问题吗?为什么它会在每次页面请求时加载图标? see attachment 最佳答案 我的网站图标没有这个问题。我通过 在最顶部的 __layout.svelte
我有一个计算和显示统计数据的 SvelteKit 着陆页组件。因为从数据库中提取数字是一项繁重的工作,而且这些信息只更新大约一个小时左右,所以我想缓存结果,以便为所有访问者快速提供登陆页面。在路由 l
我对 SvelteKit 和 Supabase 都比较陌生,并且自己做了一些实验,但我想知道使用这两种技术实现用户身份验证的最佳方式是什么。 我目前在我的 __layout.svelte 文件中有以下
我正在尝试使用 sveltekit 创建一个导航栏。到目前为止,我所有的链接(哈希路由)都可以在单击时设置样式。但是,在多次单击“主页”路由后,它停止导致页面加载,这导致我的 $page 订阅无法更新
在 sveltekit 中,我有一个静态文件夹,其中有 .zip 文件,为了在本地获取它,我做了类似的事情: const res = await fetch("/static/makeup.zip")
SvelteKit 是否可以获取当前页面的协议(protocol)(HTTP 或 HTTPS)? 类似于: import {page} from '$app/stores'; console.log(
我在 Svelte 组件中有一个链接。此链接的目标由保留代理服务器处理,因此链接目标不是 Svelte 应用程序的一部分,即使它与 Svelte 应用程序共享相同的 URL 路径。 如果我单击链接,S
我有一个页面(动态路由),我从加载函数中的 API 获取数据。在获取数据之前显示加载指示器的正确方法是什么。我尝试过的事情: 使用等待 block 。我返回一个获取函数的 promise ,然后在正常
我想试用新的 SvelteKit 替代 Sapper,但我无法启动开发服务器。 我跑了: npm init svelte@next npm install npm run dev -- --open
我对 svelte 尤其是 SvelteKit 还很陌生。目前,我正在开展 2 个项目。 第一个是我使用的 SPA svelte-spa-router管理不同的状态并提供前后导航的能力,就像我们在老式
如何在 sveltekit 的端点中访问 session ?我试过这个但没有运气: import { get } from 'svelte/store'; import { getStores}
我一直在开发一个 sveltekit 应用程序,最近我的主导航菜单遇到了问题。当应用程序加载或刷新时,与当前 URL 对应的当前菜单项未设置为事件。 (即菜单项“主页”的 URL 为“/”)我很难在网
我正在尝试将 Strapi 后端连接到 SvelteKit 前端,并坚持如何保持用户登录状态,以便一切都不会在刷新或导航到新页面时重置。我试过: 将 Strapi 发布的 jwt 和用户对象存储在 l
在 layout.server.ts 中我尝试 import type { LayoutServerLoad } from './$types'; 但是找不到类型: '"./$types"' has
我是一名优秀的程序员,十分优秀!