InertiaLink y Link en Laravel Inertia

Para crear enlaces dentro de una aplicación de Inertia, deberá usar el componente de enlace de Inertia. Este es un envoltorio ligero alrededor de un enlace de anclaje estándar <a> que intercepta eventos de clic y evita que se produzcan recargas de página completa. Así es como Inertia proporciona una experiencia de aplicación de una sola página.

Vamos a hablar sobre un cambio importante que tenemos en las últimas actualizaciones de de Inertia en Laravel, y es un cambio de organización interna de Inertia; específicamente el cambio de nombre de un módulo de Vue:

https://inertiajs.com/releases/inertia-vue3-0.5.0-2021-07-13

Ahora nuestros InertiaLink se llaman como Link:

<inertialink method="DELETE" :href="route('user.destroy', { customer: u })">Borrar</Link>

Aparte de esto, tenemos que registrarlo para poder emplearlo

import { Link } from '@inertiajs/vue3' // vue 3

o

import { Link } from '@inertiajs/vue' // vue 2
components: {
    ...
    Link
},

Y lo podemos emplear sin problemas de la misma manera; en este aspecto, no tenemos ningún cambio:

<Link  method="DELETE" :href="route('user.destroy', { customer: u })">Borrar</Link>

Métodos

Puede especificar el método para una solicitud de vínculo de inercia. El valor predeterminado es GET, pero también puede usar POST, PUT, PATCH y DELETE.

import { Link } from '@inertiajs/vue3'

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

Header

Al igual que incluir headers:

import { Link } from '@inertiajs/vue3'

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

Remplazar la pila al navegar

Puede especificar el comportamiento del historial del navegador. Por defecto, las visitas a la página insertan el estado (nuevo) (window.history.pushState) en el historial; sin embargo, también es posible reemplazar el estado (window.history.replaceState) configurando el atributo replace en verdadero. Esto hará que la visita reemplace el estado de historial actual, en lugar de agregar un nuevo estado de historial a la pila:

import { Link } from '@inertiajs/vue3'

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

Preserve scroll

Otra opion muy interesante, es la de evitar que al navegar, el scroll se reinicie, para ello:

import { Link } from '@inertiajs/vue3'

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

Conclusiones

Así que es eso, ahora tenemos un nuevo esquema para trabajar con los enlaces cuyo cambios es SOLO un nombre, para referir nuestras rutas que ahora es mas corto; por lo demás, puedes hacer exactamente lo mismo.

Estas son solamente algunas opciones que puedes utilizar, y recuerda que tienes mas información en la documentación oficial.

Recuerda que este material forma parte de mi curso completo en Laravel Inertia

24-08-2021 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• InertiaLink y Link en Laravel Inertia