链接 Links

未匹配的标注

要在 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,但是您也可以使用 POSTPUTPATCH 和 DELETE

Vue3

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

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

数据

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

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 图标。

本文章首发在 LearnKu.com 网站上。

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

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

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

上一篇 下一篇
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
贡献者:3
讨论数量: 0
发起讨论 只看当前版本


暂无话题~