連結

若要在 Inertia 應用程式中建立其他頁面的連結，您通常會使用 Inertia 的 <Link>元件。這個元件是標準錨點 <a> 連結的輕量包裝，它會攔截點擊事件並防止整個頁面重新載入。這就是 Inertia 如何在應用程式載入後提供單頁應用程式體驗。

建立連結

若要建立 Inertia 連結，請使用 Inertia 的 <Link> 元件。您提供給此元件的任何屬性都會代理到基礎的 HTML 標籤。

import { Link } from '@inertiajs/vue3'

<Link href="/">Home</Link>

依預設，Inertia 會將連結呈現為錨點 <a> 元素。不過，您可以使用 as 屬性來變更標籤。

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button" type="button">Logout</Link>

// Renders as...
<button type="button">Logout</button>
不建議建立 POST/PUT/PATCH/DELETE 錨點 <a> 連結，因為這會導致「在新索引標籤/視窗中開啟連結」的協助工具問題。相反地，請考慮使用更合適的元素，例如 <button>。

方法

您可以使用 method 屬性來指定 Inertia 連結請求的 HTTP 請求方法。連結使用的預設方法為 GET，但您可以使用 method 屬性來建立 透過連結發出 POST、PUT、PATCH 和 DELETE 請求。

import { Link } from '@inertiajs/vue3'

<Link href="/logout" method="post" as="button">Logout</Link>

資料

當發出 POST 或 PUT 請求時，您可能希望在請求中新增其他資料。您可以使用 data 屬性來完成此操作。提供的資料可以是 object 或 FormData 實例。

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" method="post" :data="{ foo: bar }">Save</Link>

自訂標頭

headers 屬性允許您將自訂標頭新增至 Inertia 連結。不過，Inertia 內部用來將其狀態傳達給伺服器的標頭具有優先權，因此無法覆寫。

import { Link } from '@inertiajs/vue3'

<Link href="/endpoint" :headers="{ foo: bar }">Save</Link>

瀏覽器歷程記錄

replace 屬性允許您指定瀏覽器的歷程記錄行為。依預設，頁面瀏覽會將 (新的) 狀態 (window.history.pushState) 推入歷程記錄中；不過，也可以透過將 replace 屬性設定為 true 來取代狀態 (window.history.replaceState)。這會使瀏覽取代目前的歷程記錄狀態，而不是將新的歷程記錄狀態新增至堆疊。

import { Link } from '@inertiajs/vue3'

<Link href="/" replace>Home</Link>

狀態保留

您可以使用 preserve-state 屬性來保留頁面元件的本機狀態。這會防止頁面元件完全重新呈現。preserve-state 屬性在包含表單的頁面上特別有用，因為您可以避免手動重新填入輸入欄位，而且也可以維持聚焦的輸入。

import { Link } from '@inertiajs/vue3'

<input v-model="query" type="text" />

<Link href="/search" :data="{ query }" preserve-state>Search</Link>

捲軸保留

您可以使用 preserveScroll 屬性來防止 Inertia 在進行頁面瀏覽時自動重設捲軸位置。

import { Link } from '@inertiajs/vue3'

<Link href="/" preserve-scroll>Home</Link>

如需管理捲軸位置的詳細資訊，請參閱下列文件的說明 捲軸管理.

部分重新載入

only 屬性允許您指定在後續瀏覽該頁面時，只應從伺服器擷取頁面屬性 (資料) 的子集。

import { Link } from '@inertiajs/vue3'

<Link href="/users?active=true" :only="['users']">Show active</Link>

如需此主題的詳細資訊，請參閱下列有關的完整文件 部分重新載入.

啟用狀態

通常需要根據目前的頁面設定導覽連結的啟用狀態。當使用 Inertia 時，可以透過檢查 page 物件並針對 page.url 和 page.component 屬性進行字串比較來完成此操作。

import { Link } from '@inertiajs/vue3'

// URL exact match...
<Link href="/users" :class="{ 'active': $page.url === '/users' }">Users</Link>

// Component exact match...
<Link href="/users" :class="{ 'active': $page.component === 'Users/Index' }">Users</Link>

// URL starts with (/users, /users/create, /users/1, etc.)...
<Link href="/users" :class="{ 'active': $page.url.startsWith('/users') }">Users</Link>

// Component starts with (Users/Index, Users/Create, Users/Show, etc.)...
<Link href="/users" :class="{ 'active': $page.component.startsWith('Users') }">Users</Link>

您可以使用完全符合比較 (===)、startsWith() 比較 (適用於比對頁面的子集)，甚至使用規則運算式進行更複雜的比較。

使用這種方法，您不只是設定類別名稱。您可以使用這項技術，針對啟用狀態有條件地呈現任何標記，例如不同的連結文字，甚至是表示連結已啟用的 SVG 圖示。