SvelteKit進階

連結選項

在 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}>

在 GitHub 上編輯此頁面

錯誤 Service Workers