链接 Links

0.11

0.11

要在 Inertia 应用程序中创建连接，您需要使用 Inertia 惯性链接组件。这是一个围绕标准锚点链接的轻量级封装，用于拦截点击事件并防止发生这个页面的重新加载。这就是 Inertia 如何提供单页面应用体验。

创建连接

要创建 Inertia 连接，请使用 Inertia <链接> 组件。请注意，您提供的任何属性都将被代理到底层标签。

Vue3

import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'

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

默认情况下，Inertia 将链接渲染为锚点 <a> 元素。但是，y您可以使用 as 属性更改标签。

Vue3

import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'

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

// 渲染为：
<button type="button">Logout</button>

不鼓励创建 POST/PUT/PATCH/DELETE 锚点 <a> 链接，因为它会导致「打开新标签/窗口中的链接」可访问性问题。相反，请考虑使用更合适的元素，例如 <button>。

方法

您可以指定 Inertia 链接请求的方法。默认为 GET，但是您也可以使用 POST、PUT、PATCH 和 DELETE。

Vue3

import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'

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

数据

您可以使用 data 属性添加数据。这可以是 object 或FormData 实例。

Vue2 Vue3 React Svelte

import { Link } from '@inertiajs/inertia-vue3'

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

Headers

headers 选项允许您向 Inertia 链接添加自定义 headers。请注意，Inertia 的 headers 优先，因此不能被覆盖。

Vue3

import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'

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

替换

您可以指定浏览器历史记录行为。默认情况下，页面会访问推送 (new) 状态 (window.history.pushState) 到历史中，但是它也可以通过将替换属性设置为 true 来替换状态 (window.history.replaceState) 。这将导致访问替换当前历史记录状态，而不是将新的记录状态添加到堆栈中。

Vue3

import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'

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

保持状态

您可以使用 preserve-State 属性保留页面组件的本地状态。这将阻止页面组件完全重新呈现。这对表单特别有帮助，因为您可以避免手动重新填充输入字段，并且还可以保持焦点输入。Vue3

Vue3

import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'

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

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

保留滚动

您可以使用 preserve-scroll 属性防止 Inertia 在进行访问时自动重置滚动位置。

Vue3

import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'

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

For详细信息，参见 scroll management 页面。

部分重装

only 选项允许您在后续访问同一页面时从服务器请求一部分 props（数据）。

Vue3

import { Link } from '@inertiajs/inertia-vue3'
// Vue2: import { Link } from '@inertiajs/inertia-vue'

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

有关详细信息，请参阅 部分重新加载 页面。

活动状态

通常希望根据当前页面为导航链接设置活动状态。这可以在 Inertia 中使用 page 对象通过对page.url 和`page.component 属性进行字符串比较来完成。

Vue2 / Vue3

import { Link } from '@inertiajs/inertia-vue'

// 网址精确匹配
<Link href="/users" :class="{ 'active': $page.url === '/users' }">Users</Link>

// 组件精确匹配
<Link href="/users" :class="{ 'active': $page.component === 'Users/Index' }">Users</Link>

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

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

您可以进行完全匹配 (===)，或 startsWith() 检查（用于匹配页面子集），甚至使用正则表达式进行更复杂的比较。

这种方法的好处在于您不仅限于设置类名。您可以使用此技术有条件地呈现任何处于活动状态的标记，例如不同的链接文本，甚至是 SVG 图标。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://learnku.com/docs/inertia/0.11/li...

译文地址：https://learnku.com/docs/inertia/0.11/li...