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
相关产品推荐
相关产品推荐

