在 SvelteKit 中，使用``元素（而不是特定框架的``组件）在应用程序的路由之间进行导航。如果用户点击的链接的`href`属于应用程序（例如，与指向外部网站的链接相对），则 SvelteKit 将通过导入其代码并调用任何需要获取数据的`load`函数来导航到新页面。 您可以使用`data-sveltekit-*`属性自定义链接的行为。这些属性可以应用于``本身，或者应用于父元素。 这些选项也适用于具有 `
` 元素和 [`method="GET"`](form-actions#GET-vs-POST) 的。 ## data-sveltekit-preload-data 在浏览器注册用户点击链接之前，我们可以检测到他们在链接上悬停鼠标（在桌面端）或者触发了 `touchstart` 或 `mousedown` 事件。在这两种情况下，我们可以合理推测即将发生一个 `click` 事件。 SvelteKit 可以使用这些信息在导入代码和获取页面数据时抢占先机，这可以给我们额外几百毫秒——这是用户界面感觉卡顿和感觉流畅之间的区别。 我们可以通过`data-sveltekit-preload-data`属性来控制这种行为，该属性可以有两个值之一： * `"hover"` 表示当鼠标悬停在链接上时，将开始预加载。在移动设备上，预加载从 `touchstart` 开始。 * `"点击"` 表示一旦注册了 `touchstart` 或 `mousedown` 事件，预加载就会开始 默认项目模板在 `src/app.html` 中的 `` 元素上应用了 `data-sveltekit-preload-data="hover"` 属性，意味着默认情况下每个链接在悬停时都会预先加载： ```html
%sveltekit.body%
``` 有时，当用户悬停在链接上时调用 `load` 可能不理想，要么是因为它可能导致误报（点击不必跟随悬停）或因为数据更新非常快，延迟可能导致数据过时。 在这些情况下，您可以指定 `"tap"` 值，这将导致 SvelteKit 仅在用户点击或点击链接时调用 `load`： ```html Get current stonk values ``` > \[!注意\] 您还可以通过程序调用来自 `$app/navigation` 的 `preloadData`。 数据永远不会在用户选择减少数据使用时预加载，意味着 [`navigator.connection.saveData`](https://developer.mozilla.org/en-US/docs/Web/API/NetworkInformation/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` 属性... ```html Path ``` ...点击链接将导致全页导航。 链接具有 `rel="external"` 属性的将接受相同的处理。此外，它们将在 [预渲染](page-options#prerender) 过程中被忽略。 ## data-sveltekit-replacestate 有时您不希望导航在浏览器会话历史中创建新条目。将一个 `data-sveltekit-replacestate` 属性添加到链接中... ```html Path ``` ...將替换单个当前`历史`条目，而不是在点击链接时使用`pushState`创建一个新的条目。 ## data-sveltekit-keepfocus 有时您不希望在导航后重置[焦点](accessibility#Focus-management)。例如，可能您有一个在用户输入时提交的搜索表单，并且您希望保持文本输入的焦点。向其中添加一个`data-sveltekit-keepfocus`属性... ```html
``` ...將導致當前聚焦的元素在導航後保持聚焦。通常，請避免在鏈接上使用此屬性，因為聚焦的元素將是``標籤（而不是之前聚焦的元素），並且屏幕讀取器和其他輔助技術用戶通常期望在導航後移動聚焦。您還應該只在導航後仍然存在的元素上使用此屬性。如果元素不再存在，用戶的聚焦將會丟失，這會為輔助技術用戶帶來令人困惑的體驗。 ## data-sveltekit-noscroll 当导航到内部链接时，SvelteKit 会模仿浏览器的默认导航行为：它会将滚动位置更改为 0,0，使用户位于页面的最左上角（除非链接包含一个`#hash`，在这种情况下，它将滚动到具有匹配 ID 的元素）。 在某些情况下，您可能希望禁用此行为。向链接添加一个 `data-sveltekit-noscroll` 属性... ```html Path ``` ...点击链接后将阻止滚动。 ## 禁用选项 要禁用元素内已启用的任何这些选项，请使用 `"false"` 值： ```html
a b c
d e f
``` 为条件性地将属性应用于元素，请这样做： ```svelte
```