前言
Svelte，一個語法簡潔、入門容易，面向未來的前端框架。
從 Svelte 誕生之初，就備受開發者的喜愛，根據統計，從 2019 年到 2024 年，連續 6 年一直是開發者最感興趣的前端框架 No.1：
Svelte 以其獨特的編譯時優化機制著稱，具有輕量級、高性能、易上手等特性，非常適合構建輕量級 Web 項目。
為了幫助大家學習 Svelte，我同時搭建了 Svelte 最新的中文文檔站點。
如果需要進階學習，也可以入手我的小冊《Svelte 開發指南》，語法篇、實戰篇、原理篇三大篇章帶你係統掌握 Svelte！
歡迎圍觀我的“網頁版朋友圈”、加入“冴羽·成長陪伴社羣”，踏上“前端大佬成長之路”。
鏈接選項
在 SvelteKit 中，使用 <a> 元素（而不是框架特定的 <Link> 組件）在應用程序的路由之間導航。如果用户點擊一個由應用程序"擁有"的鏈接（而不是指向外部網站的鏈接），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"> 獲取當前股票價值 </a>[!NOTE] 您也可以從$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 變化而導致的性能問題。
[!NOTE] 由於預加載代碼是預加載數據的先決條件，因此只有當此屬性指定的值比存在的任何 data-sveltekit-preload-data 屬性更急切時，此屬性才會生效。
與 data-sveltekit-preload-data 一樣，如果用户選擇了減少數據使用，此屬性將被忽略。
data-sveltekit-reload
偶爾，我們需要告訴 SvelteKit 不要處理鏈接，而是讓瀏覽器來處理。給鏈接添加 data-sveltekit-reload 屬性...
<a data-sveltekit-reload href="/path">路徑</a>...將會在點擊鏈接時導致完整的頁面導航。
具有 rel="external" 屬性的鏈接將受到相同的處理。此外，它們在預渲染期間會被忽略。
data-sveltekit-replacestate
有時您不希望導航在瀏覽器的會話歷史記錄中創建新條目。給鏈接添加 data-sveltekit-replacestate 屬性...
<a data-sveltekit-replacestate href="/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>路徑</a>...將在點擊鏈接後阻止滾動。
禁用選項
要在啓用了這些選項的元素內禁用任何選項，請使用 "false" 值：
<div data-sveltekit-preload-data>
<!-- 這些鏈接將被預加載 -->
<a href="/a">a</a>
<a href="/b">b</a>
<a href="/c">c</a>
<div data-sveltekit-preload-data="false">
<!-- 這些鏈接將不會被預加載 -->
<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}>Svelte 中文文檔
點擊查看中文文檔：SvelteKit 鏈接選項
系統學習 Svelte，歡迎入手小冊《Svelte 開發指南》。語法篇、實戰篇、原理篇三大篇章帶你係統掌握 Svelte！
此外我還寫過 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答讀者問等 14 個系列文章， 全系列文章目錄：https://github.com/mqyqingfeng/Blog
歡迎圍觀我的“網頁版朋友圈”、加入“冴羽·成長陪伴社羣”，踏上“前端大佬成長之路”。
