Vue Router e Inertia en Laravel

▶

En nuestros proyectos tenemos automáticamente una navegación tipo SPA (Single Page Application) en Laravel Inertia, que recordemos que usa Vue por defecto para el render en el cliente en la vista. Por lo tanto, los enlaces típicos de HTML (<a>) no se deben emplear para la navegación interna, ya que estos provocan recargas completas de la página.

Podemos comprobarlo fácilmente: si colocamos un enlace tradicional, al hacer clic veremos que se recarga toda la página, lo cual no es lo que queremos. La navegación interna debe ser interna al contenedor de la aplicación, que usualmente en Vue se define como <div id="app">. En nuestro caso, la recarga debe ocurrir solo en la sección correspondiente, no en toda la aplicación:

import { Link } from "@inertiajs/vue3"

Cuándo usar enlaces tradicionales

No significa que los enlaces estén prohibidos. Se pueden usar en casos externos, como enlaces a páginas de terceros o sitios web que no forman parte de nuestra aplicación. Sin embargo, para la navegación interna, debemos utilizar el mecanismo provisto por Inertia.

Inertia reemplaza a Vue Router

En Vue básico, normalmente usaríamos Vue Router para manejar la navegación SPA. Sin embargo, cuando trabajamos con Inertia, Vue Router no es necesario, ya que Inertia implementa internamente la navegación y el cambio de URL.

Si combináramos Vue Router con Inertia, ambos procesos se solaparían, generando conflictos. Por eso, Inertia proporciona un componente propio llamado Link, que forma parte del core de Inertia.

Importación del componente Link

En Vue 3 importamos el componente Link de la siguiente manera:

import { Link } from "@inertiajs/vue3"

Esta es una importación con nombre, por lo que debemos respetar el nombre Link tal cual. No podemos asignarle un alias arbitrario como Link2, ya que no será reconocido:

// Incorrecto
import { Link2 } from "@inertiajs/vue3" // Esto dará error

Una vez importado, podemos usarlo en nuestros componentes:

import AppLayout from "@/Layouts/AppLayout.vue"

Uso básico del componente Link

El uso de Link es muy sencillo, similar a un <a> en HTML, pero mantiene la navegación SPA:

<Link class="text-sm text-purple-400 hover:text-purple-700"
     :href="route('category.edit', c.id)">
 Edit
</Link>

:href="route('category.edit', c.id)" genera la URL de la ruta.

Al hacer clic, no se recarga toda la página, solo se actualiza el componente correspondiente.

Incluso cambia la URL y el título de la página, respetando el comportamiento de una SPA.

También podemos crear enlaces para otras acciones, como crear un nuevo registro:

<Link class="link-button-default my-3" :href="route('category.create')">
 Create
</Link>

Conclusión

Con Inertia, tenemos:

• Navegación SPA sin recargar toda la página.
• Manejo de rutas y URLs de forma sencilla y segura.
• Eliminación de la necesidad de Vue Router para navegación interna.

Esto nos permite integrar de manera eficiente la navegación de nuestros módulos y componentes, manteniendo la aplicación rápida y fluida.