You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

data-sveltekit-preload-data在{#each}块中是否生效?

动态导航栏+悬停预加载的SvelteKit实现

我用{#each}循环来动态生成导航栏,既避免了代码重复,又通过SvelteKit的内置属性实现了鼠标悬停时预加载目标页面的功能,代码如下:

{#each navbarLinks as navbarLink}
    <li>
        <a href={navbarLink.href} data-sveltekit-preload-data="hover">
            {navbarLink.name}
        </a>
    </li>
{/each}

核心细节

  • 借助{#each}遍历navbarLinks数组,批量生成导航条目,无需重复编写相同结构的HTML代码
  • 给<a>标签添加data-sveltekit-preload-data="hover"属性,当鼠标悬停在导航链接上时,会自动预加载对应页面的资源,优化页面跳转体验

内容的提问来源于stack exchange,提问作者blechdavier

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.29 10:03:10