30. Rutas dinámicas con vue-router y useRoute | AbiDev
Summary
TLDREn este episodio de 'Vida el Día', se presenta cómo crear una ruta dinámica en una aplicación web. El objetivo es que cada usuario acceda a la misma ruta, pero con datos personalizados según su ID. Se utiliza la documentación de View Router para establecer la ruta con dos puntos y el nombre del parámetro. Se crea una vista 'usuario-detalle' y se muestra cómo integrarla en un template base. A través de un ejemplo práctico, se explica cómo mostrar información específica del usuario, como nombre, correo electrónico y foto, utilizando un enfoque dinámico. Además, se discuten técnicas para manejar la carga de datos y la visualización de elementos mientras se espera la respuesta de la API, como mostrar un spinner. El video termina con una invitación a la audiencia para interactuar a través de suscripciones, 'me gusta' y comentarios.
Takeaways
- 😀 El objetivo del video es crear una ruta dinámica en una aplicación.
- 🔗 Se menciona que en un video anterior ya se preparó una serie de enlaces para esta ruta.
- 🛠 Se explica que una ruta dinámica muestra datos específicos de cada usuario a través de un mismo patrón de URL.
- 📚 Se hace referencia a la documentación de View router y cómo se utiliza la notación de 'dos puntos' para definir parámetros dinámicos.
- 🖌️ Se crea una vista llamada 'usuario detalle' para mostrar información específica de cada usuario.
- 📝 Se describe cómo se estructura el template base y se asigna a la vista 'usuario detalle'.
- 🔑 Se discute la importancia del parámetro 'ID' para personalizar la información mostrada en la vista.
- 📡 Se menciona el uso del componente 'Lazy' para cargar vistas solo cuando son necesarias.
- 🔍 Se sugiere la necesidad de importar y utilizar un hook de View router para obtener parámetros de la ruta y gestionar la navegación.
- 📱 Se habla sobre cómo mostrar información dinámica en la vista 'usuario detalle', como el nombre, correo electrónico y avatar del usuario.
- 🛑 Se destaca la posibilidad de mejorar la experiencia de carga con indicadores de progreso mientras se obtienen datos del API.
Q & A
¿Qué es una ruta dinámica en el contexto de la creación de aplicaciones web?
-Una ruta dinámica es una ruta que muestra datos específicos de acuerdo a un parámetro que se le pasa, permitiendo reutilizar la misma ruta para diferentes usuarios o entidades.
¿Cómo se identifican las rutas dinámicas en la documentación de View router?
-Las rutas dinámicas se identifican en la documentación de View router con dos puntos seguidos del nombre del parámetro que se desea utilizar.
¿Cuál es el primer paso para crear una vista dinámica en el script proporcionado?
-El primer paso es crear una vista, en este caso llamada 'usuario detalle', que será utilizada para mostrar información específica de cada usuario.
¿Qué es un template base y cómo se utiliza en el script para la ruta dinámica?
-Un template base es una plantilla que se utiliza para construir la estructura de una página web. En el script, el template base es donde se especifica la ruta 'usuario detalle' que luego se rellenará con información dinámica.
¿Cómo se define la ruta 'usuario detalle' en el script para incluir el parámetro ID?
-La ruta 'usuario detalle' se define con un slash y el ID, utilizando el nombre de la ruta 'usuario' seguido de 'ID', donde 'ID' es el parámetro dinámico que se utilizará para mostrar información específica.
¿Qué componente se utiliza para cargar la vista solo cuando se visita esa vista específica?
-Se utiliza el componente 'usuario detalle' de manera que se cargue de manera Lazy, es decir, solo cuando se visite esa vista específica.
¿Qué es un 'hook' en el contexto de View router y cómo se utiliza en el script?
-Un 'hook' es una función que se ejecuta en ciertas etapas del ciclo de vida de una aplicación. En el script, se utiliza un hook para imprimir por consola y obtener los datos del usuario por medio de la ID cuando se monta la aplicación.
¿Cómo se obtienen los parámetros de la ruta en View router?
-Los parámetros de la ruta se obtienen utilizando un hook que permite acceder a la información de la ruta actual, en este caso, se utiliza 'useRoute' para obtener el ID del usuario.
¿Qué es un 'API endpoint' y cómo se utiliza en el script para obtener datos de un usuario?
-Un 'API endpoint' es una dirección URL que representa una solicitud específica a un servicio web. En el script, se utiliza un endpoint para hacer una solicitud fetch al pasar el ID del usuario y obtener los datos correspondientes.
¿Cómo se maneja la reacción a los datos obtenidos desde el API en el script?
-Se utiliza una constante reactiva llamada 'usuario' que se inicializa como nulo y se actualiza con los datos obtenidos desde el API utilizando la propiedad 'data' de la respuesta.
¿Cómo se muestra la información del usuario en la vista 'usuario detalle'?
-La información del usuario se muestra utilizando la constante reactiva 'usuario' para acceder a las propiedades como 'nombre', 'correo electrónico' y 'avatar', y se muestran en el template correspondiente.
¿Cómo se podría mejorar la experiencia de carga de datos en la vista 'usuario detalle'?
-Se podría mejorar la experiencia de carga utilizando una variable para controlar el estado de la solicitud al API, mostrando un spinner o indicador mientras se espera por la información.
Outlines
😀 Creación de una ruta dinámica
En el primer párrafo, se discute cómo crear una ruta dinámica en una aplicación. La idea es que cada usuario acceda a la misma ruta, pero que muestre datos específicos según su identificación. Se menciona la documentación de View router y cómo se utiliza la notación de dos puntos para definir un parámetro dinámico. Se crea una vista llamada 'usuario-detalle' y se explica cómo se estructura la ruta con un ID como parámetro. Además, se menciona el uso de componentes y cómo se puede cargar de manera perezosa la vista solo cuando es necesario.
🔍 Detalles de la vista de usuario y su implementación
El segundo párrafo se enfoca en la implementación de la vista 'usuario-detalle'. Se describe cómo se deben mostrar los datos del usuario, como el nombre, correo electrónico y foto de perfil, aunque se menciona que la foto no está disponible en ese momento. Se habla sobre la necesidad de importar un 'Hub de View router' para obtener los parámetros de la ruta y se sugiere cómo obtener los datos del usuario a través de una API utilizando el ID recibido en la ruta. Se muestran ejemplos de cómo se podría hacer la solicitud de datos y cómo manejar la respuesta de la API.
🚀 Consumo de datos y renderizado dinámico
En el tercer párrafo, se profundiza en el proceso de consumo de datos y renderizado dinámico en la vista 'usuario-detalle'. Se crea una constante reactiva llamada 'usuario' y se establece su valor inicial como nulo, con la posibilidad de ser un objeto de usuario o nulo. Se describe cómo se actualiza esta constante con los datos obtenidos de la API utilizando el ID dinámico. Luego, se muestra cómo se utilizarían estas variables para mostrar información específica del usuario en la vista, como el nombre, el correo electrónico y la foto de perfil. Se menciona también la posibilidad de mejorar la experiencia de carga con indicadores de progreso y se cierra el párrafo con un recordatorio de interacción y feedback del curso.
Mindmap
Keywords
💡Ruta dinámica
💡ID
💡Template base
💡Componente
💡Lazy loading
💡Fetch
💡Estado reactivo
💡Desestructuración
💡Spinner
💡API
Highlights
Creación de una ruta dinámica en el proyecto para mostrar datos específicos de cada usuario.
Uso de enlaces para dirigir a los usuarios a una ruta específica con parámetros.
Explicación de cómo funcionan las rutas dinámicas según la documentación de View router.
Creación de una vista llamada 'usuario detalle' para mostrar información del usuario.
Método para reutilizar la misma vista para diferentes usuarios mediante el uso de ID.
Implementación de un enlace dinámico utilizando dos puntos y el nombre del parámetro.
Estructuración de la ruta para incluir el componente 'usuario detalle'.
Integración de Lazy loading para cargar vistas solo cuando son necesarias.
Revisión de un error en la consola relacionado con enlaces incorrectos.
Corrección del error y prueba de navegación a la vista 'usuario detalle'.
Diseño del template para mostrar información del usuario, como nombre, correo electrónico y foto.
Importación del Hook 'useRouter' para obtener parámetros de la ruta y manejar la navegación.
Uso del ID del usuario para realizar una solicitud de API y obtener datos específicos.
Implementación de un fetch para obtener datos del usuario a través de la API.
Manejo de datos reactivos y actualización de la vista con la información del usuario.
Visualización de información dinámica del usuario en la vista 'usuario detalle'.
Identificación de un tiempo de espera en la carga de información y sugerencia de solución.
Invitación a la audiencia a interactuar a través de suscripciones, 'me gusta' y comentarios.
Transcripts
Hola a todos Bienvenidos a vida el día
de hoy vamos a
crear una ruta dinámica si bien en el
vídeo anterior Ya dejamos listo no una
serie de enlaces OK Para que al darle
clic Pues nos lleve a una ruta y aquí en
usuarios que tenemos una serie en las
entonces La idea es que cada uno vaya a
la misma ruta pero que esa ruta se
comporte de acuerdo O sea que esa ruta
muestra los datos de cada uno pero vamos
a reutilizar la misma siempre por
ejemplo aquí deberíamos irnos a de
acuerdo con el ID No aquí le pasamos el
parámetro del ID acá le pasamos otro
parámetro Y así sucesivamente OK Bueno
eso es lo que vamos a hacer ahorita eso
se conoce como una ruta dinámica ahora
miren aquí en la documentación de View
router hay una parte que dice dynamic
Road entonces la forma de hacerlo según
la documentación es poniéndole dos
puntitos y el nombre del cómo queremos
que se llame el parámetro
Bueno en ese caso lo que vamos a hacer
primero va a ser crear una vista vamos a
crear una vista que sea me usuario
usuario detalle
OK Vamos a llamar usuarios detalles
Uy que me pase hoy día es de mañana
tengo los dedos dormidos todavía ahí me
comí una usuaria detalle
disculpen que tengo estoy medio dormido
todavía bueno entonces ahora lo que
vamos a hacer es
crear nuestro template base aquí le
vamos a poner solo Vamos a ponerle
usuario detalle
ya luego vamos viendo cómo se va
desarrollando y nada más ahora según la
documentación Esta es la forma de
crearlo en la ruta no entonces acá yo
tendría que poner en el pad mi ruta se
llama usuario detalle
Ok y debo ponerle un Slash y el ID este
se puede llamar como yo quiero ya le voy
a poner
usuario y le voy a poner
porque le pongo usuario ID y seguido le
pongo el componente
componente
reitero no que esta forma de hacerlo es
como
con Lazy quiere decir que se va a cargar
esta vista Solo cuando se vaya a esa
vista
y es usuario detalle Bueno ahora mismo
cuando se vaya a su usuario cuando haga
clic aquí
estamos aquí
vamos a ver qué pasó que creo que ha
habido un error consola
[Música]
efectivamente me comí el enlace
entonces en usuarios si vamos ahora aquí
ya nos lleva hacia usuario detalle no sé
otra vez la u la puse adelante Qué cosa
pero bueno entonces aquí en usuario
detalle
que lo que vamos a hacer
Aquí esta ruta ya tenemos vamos a crear
el template lo que va a mostrar aquí lo
que queremos es Mostrar
ok
y vamos a mostrar este un carro Body
para mostrar como que los datos
esto sería como que lo que se estaría
reutilizando aquí podemos poner
un
h3 que sea el nombre de la para el
nombre de la persona nombre
Vamos a ponerle también
vamos a poner unos estilos ahí de un
de unos 350 píxeles
Vamos a darle
para que se Centre
maldito de 5 y bueno Ahí está más bonito
ahora Ahí vamos a mostrar el nombre por
acá podemos Mostrar este
el correo electrónico ok
qué más podemos Mostrar aquí Ah incluso
podemos Mostrar la foto de la persona
y mg y Bueno aquí iría la foto de
momento no la tenemos
qué iría el Avatar este
a ver y eso es lo que vamos a mostrar
Pero esto esta vista se supone que se
debe funcionar para todos estos usuarios
pero de manera dinámica OK Porque si nos
damos cuenta lo que trae vamos a ver en
Red lo que trae
tu fecha fecha Aquí está en users miren
lo que es lo que traemos aquí
es un ID un avatar un email nombre y un
Last listo nombre completo y media
Avatar y el ID Entonces eso es lo que
vamos a estar mostrando en el usuario
detalle ahora nosotros en usuario
detalle deberíamos importar un
que se llama un Hub de View router
que se llama hay dos
uno que se llama ius router sin r y otro
que es con r nosotros vamos a usar el
que es sin r porque que es con r nos
sirve para si nosotros quisiéramos
Navegar de esta pestaña a otra
que nos provee ese tipo de acciones y
quisiéramos regresar en cambio el que no
tiene r podemos obtener en cambio los
parámetros que vienen en la ruta una
cueri y ese tipo de
cosas la ruta actual Ok ahorita mismo
vamos a
ver vamos a ver cómo lo podemos llamar
vamos a llamarlo
y como es un Hook una función tenemos
que ejecutar esa función
y ahorita mismo voy a imprimir por
consola voy a llamar a mi ciclo de vida
un Mountain de The View porque cuando se
Monte la aplicación yo quiero que se
haga un llamado a lápiz con ese ID y
obtenga todos los datos
no
entonces La idea es que cuando se cargue
la aplicación yo obtenga incluso esto
Debería ser a sincroni y aquí debería
obtener de Lápiz los datos del usuario
por medio de la ID que me lo pasaron por
para pero primero tengamos el ID vamos a
hacer un un solo
de un del rock punto
para y Aquí vamos a ver qué es lo que
tiene en parámetros que trae vamos a
consola Y si yo le doy clic aquí
miren me dice que el parámetro
obviamente es un objeto que tiene una
propiedad que se llama usuario ID ya
entonces lo que debería hacer con este
usuario y es consumir un en Point esto
lo puedo hacer así
Ok O lo puedo hacer también así
como ustedes quieran voy a dejarlo así
ahora lo siguiente es consumir un empate
y para esto pues vámonos al usuario View
para que igual para primero ver cómo
funciona el apio aquí miren
así No aquí te va a volver la lista de
usuario Pero si tú le pasas el ID
devolver solo el este objeto Ok ese
único usuario que tú estás consultando
Entonces Esa es la forma en la que
nosotros vamos a interactuar Y si nos
damos cuenta Va a venir todo dentro de
una propiedad Data
ya Okay vamos al código
miren Entonces ahora lo que yo voy a
hacer es esto de aquí usuario detalle
una web y voy a hacer un fetch Ok Voy a
hacer un fetch hacia este Point Es más
voy a utilizar estas comillas
ya para poder concatenar adentro y aquí
lo que voy a concatenar es esto que está
aquí
Ok y aquí le pongo el ID que es Dinámico
porque viene por medio de la ruta Ok
esto de aquí tengo que guardarlo
lo guardo en una variable
bueno en este caso una constante y luego
tengo la Data
lo hago en Jason Ok todo esto ya lo
vimos en el video anterior
y ahora lo que voy a hacer con esta Data
esta Data tiene una propiedad que se
llama punto Data ahí vienen todos los
datos que me interesa Okay entonces lo
que yo voy a hacer por acá va a ser
crear una constante que sea reactiva Ok
y se va a llamar
usuario
Ahora aquí Se está quejando Ah claro es
que no no le importa
el red y aquí le voy a decir miren Aquí
le voy a decir
va a ser el primero va a ser nulo
pero como estoy yo no te voy a escribir
le voy a poner que el tipo puede ser
y usuario
o
nulo Ok y acá cuando ya me venga esta
Data Pues le voy a poner
usuario.valeo es igual a Data punto Data
incluso este Data punto Data mejor lo
puedo desestructurar y sacar solo Data y
así no tengo que poner Data punto
bueno Y ahorita mismo
usuario detalle 4
en actualizar
ahora sí ya estoy viendo esto que me
acaba de volver el lápiz de gracias a
este usuario que yo le pasé si yo le
paso el del usuario 1 la información va
a ser diferente Miren el correo
electrónico Eve punto Hall y acá se
llama George si se dan cuenta va
cambiando eso es algo Dinámico
y ahora lo que yo voy a hacer acá Es que
voy a mostrar el usuario
como quiera sería usuario punto
fitness
y acá voy a mostrar el usuario punto
acá voy a mostrar el correo electrónico
usuario punto email esto es una forma de
hacerlo si estuviéramos usando gestores
de estado podríamos hacerlo de otra
forma
y aquí voy a poner la imagen
aquí sería
usuario punto avatarco que se llama
Elite
avatarse y aquí igual le voy a poner una
clase de bootstrap que es
img Luigi creo que se llama
vamos a
ver creo que se llama así pero bueno
igual el punto que se ve bien
Okay entonces Esto es lo que ahorita
mismo va a ser Dinámico mil ahorita me
voy para usuarios
Ahora sí casi se ve mejor ahorita
usuarios Y si yo le doy aquí en este
Ramos me muestra la información de ramo
si yo le doy en
otro más OK ahí se muestra la
información de esta persona Ahora si se
dan cuenta que hay como un tiempo de
espera
miren
hay un tiempo de espera
Pero bueno eso lo podemos manejar más
adelante ahí lo que es eso se puede
solucionar con una con una constante que
es una variable para controlar cuando se
hace el llamado lápiz y cuando ya llegó
la información del Api mientras en ese
transcurso se puede mostrar aquí una
especie de spinner o cualquier cosa que
indique que la información Se está
consultando bueno entonces eso hasta
este punto nos quedamos el día de hoy Ok
nos vemos en el siguiente vídeo y no
olviden de suscribirse y darle like y
también este Comenten porque o sea
quisiera que haya un poco más
interacción saber qué tal les va
apareciendo el curso está aprendiendo si
yo voy muy rápido o si es necesario que
quisieran que vaya un poco más rápido
también todo eso dígamelo en los
comentarios Chau
Ver Más Videos Relacionados
Curso de Android con Java: Control Spinner con una lista de String
🐍 Crear registros con PYTHON y TKINTER [07]
Curso de Android con Java: Control RecycleView
40. Guardar la información de Pinia en localStorage | AbiDev
Curso de Android con Java: Recuperar datos cuando se cierra un Activity
Java Netbeans - Clases en Java Netbeans
5.0 / 5 (0 votes)