链接

要创建指向 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 图标。