Для создания ссылок в приложении Inertia Вам необходимо использовать компонент Inertia link. Это легкая оболочка вокруг стандартной ссылки <a>, которая перехватывает события клика и предотвращает полную перезагрузку страницы. Вот как Inertia обеспечивает работу с одностраничным приложением.
Чтобы создать ссылку Inertia, используйте компонент Inertia link. Обратите внимание: любые предоставленные Вами атрибуты будут проксированы в базовый тег.
<inertia-link href="/">Главная</inertia-link>По умолчанию Inertia отображает ссылки как элементы привязки <a>. Однако Вы можете изменить тег с помощью атрибута as.
<inertia-link href="/logout" method="post" as="button" type="button">Выйти</inertia-link>
// Renders as:
<button type="button">Выйти</button>POST/PUT/PATCH/DELETE якоря <a> не рекомендуется, поскольку оно вызывает проблемы с доступностью «Открыть ссылку в новой вкладке/окне». Вместо этого рассмотрите возможность использования более подходящего элемента, например кнопки <button>.Вы можете указать метод для запроса инерционной ссылки. По умолчанию используется GET, но Вы также можете использовать POST, PUT, PATCH и DELETE.
<inertia-link href="/logout" method="post">Выйти</inertia-link>Вы можете добавить данные с помощью атрибута data. Это может быть object или экземпляр FormData.
<inertia-link href="/endpoint" method="post" :data="{ foo: bar }">Сохранить</inertia-link>Опция headers позволяет Вам добавлять пользовательские заголовки в ссылку Inertia. Обратите внимание, что заголовки Inertia имеют приоритет и поэтому не могут быть перезаписаны.
<inertia-link href="/endpoint" :headers="{ foo: bar }">Сохранить</inertia-link>Вы можете указать поведение истории браузера. По умолчанию страница посещает добавляя (новое) состояние (window.history.pushState) в историю, однако также можно заменить состояние (window.history.replaceState), установив для атрибута replace значение true. Это приведет к тому, что визит заменит текущее состояние истории вместо добавления нового состояния истории в стек.
<inertia-link href="/" replace>Главная</inertia-link>Вы можете сохранить локальное состояние компонента страницы с помощью атрибута preserve-state. Это предотвратит полный повторный рендеринг компонента страницы. Это особенно полезно для форм, так как Вы можете избежать ручного повторного заполнения полей ввода, а также можете сохранить сфокусированный ввод.
<input v-model="query" type="text" />
<inertia-link href="/search" :data="{ query }" preserve-state>Искать</inertia-link>Вы можете использовать атрибут preserve-scroll, чтобы предотвратить автоматический сброс позиции прокрутки Inertia при посещении.
<inertia-link href="/" preserve-scroll>Главная</inertia-link>Для получения дополнительной информации смотрите страницу управление прокруткой.
Опция only позволяет Вам запрашивать подмножество свойств (данных) с сервера при последующих посещениях той же страницы.
<inertia-link href="/users?active=true" :only="['users']">Показать активные</inertia-link>Для получения дополнительной информации смотрите страницу частичные перезагрузки.