跳至主要内容

链接选项

在 SvelteKit 中,<a> 元素(而不是特定于框架的 <Link> 组件)用于在应用的路由之间导航。如果用户点击一个其 href 属性由应用“拥有”的链接(与指向外部站点的链接相反),则 SvelteKit 将通过导入其代码,然后调用它需要获取数据的任何 load 函数来导航到新页面。

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

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

data-sveltekit-preload-data

在浏览器注册用户已点击链接之前,我们可以检测到他们已将鼠标悬停在其上(在桌面上)或已触发 touchstartmousedown 事件。在这两种情况下,我们都可以有根据地推测 click 事件即将发生。

SvelteKit 可以利用此信息抢先导入代码并获取页面的数据,这可以为我们节省几百毫秒的时间——这决定了用户界面是感觉滞后还是感觉流畅。

我们可以使用 data-sveltekit-preload-data 属性控制此行为,该属性可以具有两个值之一

  • "hover" 表示如果鼠标停留在链接上,则预加载将开始。在移动设备上,预加载在 touchstart 时开始
  • "tap" 表示一旦注册了 touchstartmousedown 事件,预加载就会开始

默认项目模板在 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.saveDatatrue

data-sveltekit-preload-code

即使在您不想为链接预加载数据的情况下,预加载代码也可能是有益的。data-sveltekit-preload-code 属性的工作原理类似于 data-sveltekit-preload-data,除了它可以采用四个值之一,按“急切程度”递减

  • "eager" 表示链接将立即预加载
  • "viewport" 表示链接在进入视口后将被预加载
  • "hover" - 与上面相同,但仅预加载代码
  • "tap" - 与上面相同,但仅预加载代码

请注意,viewporteager 仅适用于导航后立即存在于 DOM 中的链接——如果稍后添加链接(例如,在 {#if ...} 块中),则它将不会被预加载,直到由 hovertap 触发。这样做是为了避免因积极观察 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}>

在 GitHub 上编辑此页面

上一页 下一页