SvelteKitAdvanced

Link options

在 SvelteKit 中，使用<a>元素（而不是特定框架的<Link>组件）在应用程序的路由之间进行导航。如果用户点击的链接的href属于应用程序（例如，与指向外部网站的链接相对），则 SvelteKit 将通过导入其代码并调用任何需要获取数据的load函数来导航到新页面。

您可以使用data-sveltekit-*属性自定义链接的行为。这些属性可以应用于<a>本身，或者应用于父元素。

这些选项也适用于具有 <form> 元素和 method="GET" 的。

data-sveltekit-preload-data

在浏览器注册用户点击链接之前，我们可以检测到他们在链接上悬停鼠标（在桌面端）或者触发了 touchstart 或 mousedown 事件。在这两种情况下，我们可以合理推测即将发生一个 click 事件。

SvelteKit 可以使用这些信息在导入代码和获取页面数据时抢占先机，这可以给我们额外几百毫秒——这是用户界面感觉卡顿和感觉流畅之间的区别。

我们可以通过data-sveltekit-preload-data属性来控制这种行为，该属性可以有两个值之一：

"hover" 表示当鼠标悬停在链接上时，将开始预加载。在移动设备上，预加载从 touchstart 开始。
"点击" 表示一旦注册了 touchstart 或 mousedown 事件，预加载就会开始

默认项目模板在 src/app.html 中的 <body> 元素上应用了 data-sveltekit-preload-data="hover" 属性，意味着默认情况下每个链接在悬停时都会预先加载：

<body data-sveltekit-preload-data="hover">
	<div style="display: contents">%sveltekit.body%</div>
</body>

有时，当用户悬停在链接上时调用 load 可能不理想，要么是因为它可能导致误报（点击不必跟随悬停）或因为数据更新非常快，延迟可能导致数据过时。

在这些情况下，您可以指定 "tap" 值，这将导致 SvelteKit 仅在用户点击或点击链接时调用 load：

<a data-sveltekit-preload-data="tap" href="/stonks">
	Get current stonk values
</a>

[!注意] 您还可以通过程序调用来自 $app/navigation 的 preloadData。

数据永远不会在用户选择减少数据使用时预加载，意味着 navigator.connection.saveData 是 true。

data-sveltekit-preload-code

即使在不希望为链接预加载数据的情况下，预加载代码也有好处。data-sveltekit-preload-code 属性与 data-sveltekit-preload-data 属性类似工作，但可以接受四个值之一，按“急切程度”递减：

"eager" 表示链接将立即预加载
"viewport" 表示链接一旦进入视口就会预先加载
"hover" - 如上，除了代码是预加载的
"点击" - 如上，除了代码是预加载的

请注意，viewport 和 eager 只适用于导航后立即存在于 DOM 中的链接——如果后来添加了链接（例如在 {#if ...} 块中），则它将不会在触发 hover 或 tap 之前预加载。这是为了避免因积极观察 DOM 变化而产生的性能问题。

[注意] 由于预加载代码是预加载数据的先决条件，此属性只有在指定比任何存在的 data-sveltekit-preload-data 属性更急迫的值时才会生效。

与data-sveltekit-preload-data一样，如果用户选择了减少数据使用，则此属性将被忽略。

data-sveltekit-reload

偶尔，我们需要告诉 SvelteKit 不要处理链接，但允许浏览器处理它。给链接添加一个 data-sveltekit-reload 属性...

<a data-sveltekit-reload href="/path">Path</a>

...点击链接将导致全页导航。

链接具有 rel="external" 属性的将接受相同的处理。此外，它们将在预渲染过程中被忽略。

data-sveltekit-replacestate

有时您不希望导航在浏览器会话历史中创建新条目。将一个 data-sveltekit-replacestate 属性添加到链接中...

<a data-sveltekit-replacestate href="/path">Path</a>

...將替换单个当前历史条目，而不是在点击链接时使用pushState创建一个新的条目。

data-sveltekit-keepfocus

有时您不希望在导航后重置焦点。例如，可能您有一个在用户输入时提交的搜索表单，并且您希望保持文本输入的焦点。向其中添加一个data-sveltekit-keepfocus属性...

<form data-sveltekit-keepfocus>
	<input type="text" name="query">
</form>

...將導致當前聚焦的元素在導航後保持聚焦。通常，請避免在鏈接上使用此屬性，因為聚焦的元素將是<a>標籤（而不是之前聚焦的元素），並且屏幕讀取器和其他輔助技術用戶通常期望在導航後移動聚焦。您還應該只在導航後仍然存在的元素上使用此屬性。如果元素不再存在，用戶的聚焦將會丟失，這會為輔助技術用戶帶來令人困惑的體驗。

data-sveltekit-noscroll

当导航到内部链接时，SvelteKit 会模仿浏览器的默认导航行为：它会将滚动位置更改为 0,0，使用户位于页面的最左上角（除非链接包含一个#hash，在这种情况下，它将滚动到具有匹配 ID 的元素）。

在某些情况下，您可能希望禁用此行为。向链接添加一个 data-sveltekit-noscroll 属性...

<a href="path" data-sveltekit-noscroll>Path</a>

...点击链接后将阻止滚动。

禁用选项

要禁用元素内已启用的任何这些选项，请使用 "false" 值：

<div data-sveltekit-preload-data>
	<!-- these links will be preloaded -->
	<a href="/a">a</a>
	<a href="/b">b</a>
	<a href="/c">c</a>

	<div data-sveltekit-preload-data="false">
		<!-- these links will NOT be preloaded -->
		<a href="/d">d</a>
		<a href="/e">e</a>
		<a href="/f">f</a>
	</div>
</div>

为条件性地将属性应用于元素，请这样做：

<div data-sveltekit-preload-data={condition ? 'hover' : false}>

Edit this page on GitHub llms.txt

previous next

Errors Service workers