跳至主要内容

高级

链接选项

在 GitHub 上编辑此页面

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

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

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

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可能不合适，原因可能是它可能会导致误报（点击不一定紧跟在悬停之后），或者因为数据更新非常快，而延迟可能会导致数据陈旧。

在这些情况下，你可以指定“轻触”值，这将导致 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类似，不同之处在于它可以采用四个值之一，以降低“热切度”

  • “热切”表示链接将立即预加载
  • “视口”表示链接在进入视口后将被预加载
  • “悬停”——如上所述，但仅预加载代码
  • “轻触”——如上所述，但仅预加载代码

请注意，视口和热切仅适用于导航后立即出现在 DOM 中的链接——如果稍后添加了链接（例如，在{#if ...}块中），则在由悬停或轻触触发之前，不会预加载该链接。这是为了避免因积极观察 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>

...单击链接时将替换当前 history 条目，而不是使用 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}>
上一个 错误
下一个 服务工作进程