跳至主要內容

進階

連結選項

在 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時開始
  • 「tap」表示預載將在註冊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」 - 如上所述，但只預載程式碼
  • 「tap」 - 如上所述，但只預載程式碼

請注意，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>

...當按一下連結時，將取代目前的 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}>
上一個 錯誤
下一個 服務工作