30. Rutas dinámicas con vue-router y useRoute | AbiDev

AbiDev

15 Aug 202314:02

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

00:00

😀 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.

05:01

🔍 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.

10:04

🚀 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

Una ruta dinámica es una característica en el desarrollo web que permite mostrar contenido diferente dependiendo de los parámetros recibidos, como un ID. En el contexto del video, se utiliza para mostrar información específica del usuario a través de una misma URL, pero con datos distintos según el ID proporcionado. Por ejemplo, 'usuario/detalle' con un ID diferente para cada usuario.

💡ID

El ID es un identificador único que se utiliza para distinguir entre elementos, en este caso, entre usuarios. En el script, el ID es un parámetro que se pasa a la ruta dinámica para obtener detalles específicos del usuario. Se menciona cuando se configura la ruta 'usuario/detalle/ID' y se usa para hacer una solicitud de datos al servidor.

💡Template base

Un template base es un archivo que sirve como estructura compartida entre diferentes páginas o componentes de una aplicación. En el video, se habla de crear un template base para la vista 'usuario detalle', que será reutilizado para mostrar la información del usuario sin tener que reinventar la estructura cada vez.

💡Componente

Un componente es una unidad de código reutilizable en el desarrollo de aplicaciones, que puede contener HTML, CSS y JavaScript. En el script, el componente 'usuario detalle' es creado para encapsular la funcionalidad y la presentación de la información del usuario, permitiendo así su reutilización en diferentes partes de la aplicación.

💡Lazy loading

Lazy loading es una técnica que implica cargar elementos solo cuando son necesarios, mejorando así el rendimiento de la aplicación. En el video, se menciona que la vista 'usuario detalle' se cargará de manera 'Lazy', es decir, solo se cargará cuando el usuario acceda a ella.

💡Fetch

Fetch es una API de JavaScript utilizada para hacer solicitudes a un servidor y recibir respuestas. En el script, se utiliza fetch para obtener datos del usuario a través de una solicitud HTTP al endpoint correspondiente, pasando el ID del usuario como parámetro.

💡Estado reactivo

Un estado reactivo se refiere a una variable cuya valor puede cambiar con el tiempo y que, cuando lo hace, provoca una actualización en la interfaz de usuario. En el video, se crea una constante reactiva llamada 'usuario' para almacenar y mostrar los datos recibidos de la solicitud fetch.

💡Desestructuración

La desestructuración es una técnica en JavaScript que permite extraer valores de un objeto o array de manera más legible y concisa. En el script, se utiliza la desestructuración para obtener directamente los datos del objeto 'Data' sin tener que acceder a ellos mediante 'Data.punto.Data'.

💡Spinner

Un spinner es un tipo de indicador de carga, generalmente un diseño giratorio, que se muestra en la interfaz de usuario mientras se procesa o carga información. En el video, se sugiere la posibilidad de mostrar un spinner mientras se espera la respuesta de la API para mejorar la experiencia del usuario.

💡API

API significa Interfaz de Programación de Aplicaciones, y es un conjunto de rutinas, protocolos y herramientas para construir software y aplicaciones. En el contexto del video, la API se utiliza para obtener datos de usuarios a través de una solicitud fetch, donde se accede a un punto final (endpoint) que devuelve información específica.

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.