Vue Router e Inertia en Laravel
Nosotros aquí tenemos automáticamente una navegación de tipo SPA por lo tanto, lo que es los enlaces típicos que serían los de la etiquetada obviamente no lo empleamos aquí porque si lo empleamos vamos a tener una navegación tradicional Esto es algo que muy fácilmente puedes ver si colocamos aquí un enlace ya que cuando tú veas que va a cargar aquí la página aquí aquí arriba el iconito que estoy señalando con el cursor ya tú sabes que bueno no está funcionando la navegación spa ahí puedes ver que cargó toda la página por lo tanto no es lo que queremos ya que la navegación tiene que ser interna justamente en el contenedor seleccionado que bueno en este caso sería toda la aplicación como la tenemos pero usualmente en Vue sería el DIV que por convención colocamos como app el identificador de App pero en este caso es toda la aplicación pero solamente se tiene que recargar cierta parte de la la misma y no toda la aplicación a lo que me refiero así que bueno no es que no se pueden emplear enlaces se pueden emplear para ciertas partes cruciales por ejemplo un enlace externo a una página de un tercero es decir a un enlace a internet o algo así que no sea la aplicación pero lo que es la navegación interna no se emplea Así que que es nuestro caso de interés así que bueno para eso en View View básico existe una tecnología llamada View router pero aquí tiene todo el sentido del mundo que no se emplee Vue router ya que aquí tenemos una navegación mediante inertia es decir inertia es el que toma el lugar de Vue router que otra vez cuando nosotros empleemos View router aparte de poder recargar como quien dice componente central de una manera sencilla también se cambia la URL pero fíjate que por aquí ya automáticamente se cambia la URL por lo tanto no tiene sentido emplear Vue router porque se solapararían ambos procesos así que Inertia ya implementa un mecanismo interno que sería el de Link no es un paquete externo ya forma parte del Core de Inertia, así que tiene todo el sentido del mundo de que lo import tenemos por acá yo voy a importarlo aquí arriba … entonces aquí el paquete no sé si lo veíamos antes pero es @inertia Vue y esto lo puedes ver aquí no sé si lo revisamos pero lo podemos chequear rapidito si revisamos en la carpeta de los módulos de node que Recuerda que esto es solo lectura no cambiar nada por ahí tenemos @inertiajs que es donde estamos importando:
import { Link } from "@inertiajs/vue3"En nuestro de aquí de Vue 3 estamos importando el el componente llamado link aquí es una importación con nombre ya que aquí realmente le podemos colocar cualquier cosa y aquí tuviéramos que representarlo y esto es algo de Vue pero me parece importante recordarlo un poco y la aplicación va a seguir funcionando creo que esta es la de para ver la de Index que será esta Fíjate que sigue funcionando ya que esto es una especie de alias que le colocamos es decir nosotros aquí estamos indicando que importamos esto pero es una exportación por defecto es lo que tenemos por acá:
import AppLayout from "@/Layouts/AppLayout.vue"Por lo tanto no le podemos dar el nombre que nosotros queramos tal cual veías porque es un alias Dios mío esta cosa si es larga es lo que estamos exportando por acá que bueno por defecto es todo el componente porque no estamos exportando algo con nombre pero en este caso en este paquete no sé si aparece tampoco creo que lo vaya a buscar mucho aquí no sé si es exactamente este sí aquí está estamos exportando el componente aquí varias cosas pero al final el que le están dando es el de link que es el que estamos importando por acá, aquí estamos indicando cuál es la cosa por decirlo de alguna manera que estamos importando en este caso es Link pero pudiera ser esta cosa llamada app o este otro llamado:
import { Link2 } from "@inertiajs/vue3"bueno esto ya lo importamos desde antes si revisamos acá aquí también es una exportación una importación con nombre tal cual puedes ver entonces esa es la diferencia aquí si no le podemos colocar un alias porque no lo va a encontrar podemos hacer la prueba aquí voy a quitar estoaquí déjalo como lo teníamos antes esto era para hacer un ejemplo y aquí también quita el dos en caso de que lo hayas colocado y aquí como cualquier cosa importamos el componente esto no va a funcionar porque el link2 no existe y aquí puedes ver que no lo encuentra ahí te lo dice link2 no sabes qué es eso entonces bueno tuve que ver qué es lo que estás haciendo mal en nuestro caso sabemos que no se llama así:
import { Link } from "@inertiajs/vue3"Venimos acá recargamos y fíjate que ya no aparece el error así que bueno ya sabemos que este es el componente entonces para entrar otra vez en materia del de la clase Esto es lo que nos permite la navegación tipo web spa es decir.
Sin cargar toda la página entonces para usarlo es muy sencillo simple es como un enlace es decir con como la etiqueta a pero en vez de colocar a colocamos link esto es de ccs aquí es en mayúscula bueno da igual bueno por aquí colocamos href otra vez los dos puntos es porque queremos evaluar aquí el resultado y aquí podemos colocar la función de router y por aquí indicamos el nombre que sería category edit es el nombre de la ruta y aquí le pasamos el parámetro creo que con c no lo va a tomar tenemos que colocar el ID pero bueno podemos probar y aquí Cerramos el link … Ah mira sí toma el objeto entonces le podemos pasar aquí directamente el objeto aquí recuerda que aparece la URL:
<Link class="text-sm text-purple-400 hover:text-purple-700"
:href="route('category.edit', c)">Edit</Link>O
<Link class="text-sm text-purple-400 hover:text-purple-700"
:href="route('category.edit', c.id)">Edit</Link>Y vas a ver que la diferencia es que cuando le damos un click vas a ver que esto no recarga lo que indica es que estamos en una navegación de tipo spa cambia el título no es lo lo que estoy diciendo estoy hablando aquí del iconito que aparece cuando estás cargando la página que aquí carga muy rápido y aparece pocos milisegundos es porque es una bueno todo está local pero eso es lo que indica la navegación de tipo spa Entonces es así de simple esto y bueno ya con esto como reto créate la de crear el enlace para crear que tiene que estar por acá arriba se lo podemos colocar así que adelante ya hice el 80 ver del trabajo coloco aquí create y aquí create:
<Link class="link-button-default my-3" :href="route('category.create')">Create</Link>Y eso era todo y volvemos aquí al Index fíjate que bueno podemos utilizar las las flechitas como hacemos en Vue router y lo mismo ya así que con esto tenemos integrado o al menos la navegación de los otros módulos que nosotros ya creamos así que pues nada ya con esto terminamos y vamos para la siguiente clase.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter