Ejercicio de programación con Vuejs: Definición y manejo de rutas en Vue
0h 25m
Vue Router: Aprende a definir y manejar rutas en una aplicación con Vue.js utilizando parámetros dinámicos, navegación programática y rutas anidadas para optimizar la estructura y experiencia de usuario.
En este ejercicio, deberás demostrar tus conocimientos sobre la definición y manejo de rutas en Vuejs utilizando el paquete vue-router
. El objetivo es configurar un sistema de rutas que permita la navegación entre diferentes componentes de una aplicación ficticia de gestión de tareas.
Instrucciones
Configura las rutas: Define un sistema de rutas en un archivo llamado router.js
que incluya las siguientes rutas:
- Una ruta para el componente
Dashboard
accesible desde la URL/dashboard
. - Una ruta para el componente
Tasks
accesible desde la URL/tasks
, que incluya un parámetro de ruta:taskId
para visualizar detalles de una tarea específica. - Una ruta para el componente
Profile
accesible desde la URL/profile
con un alias/user-profile
.
Implementa la navegación programática: Implementa una función que permita navegar programáticamente desde el componente Dashboard
al componente Tasks
, pasando un taskId
específico.
Utiliza props en rutas: Configura la ruta de Tasks
para que el taskId
sea pasado al componente como un prop.
Requisitos
- El archivo
router.js
debe estar en el directoriosrc
. - Las rutas deben estar definidas utilizando
createRouter
ycreateWebHistory
. - Utiliza la importación dinámica para cargar los componentes.
- Implementa la función de navegación programática dentro de un componente llamado
Dashboard.vue
.
Ejemplo de navegación programática
Dentro del componente Dashboard.vue
, debes incluir una función que navegue al componente Tasks
con un taskId
proporcionado.
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
function goToTask(taskId: number) {
router.push({ name: 'Tasks', params: { taskId } });
}
</script>
Todos los ejercicios de programación de Vuejs
Evalúa tus conocimientos con ejercicios de programación en Vuejs de tipo Test, Puzzle, Código y Proyecto con VSCode.
Solicitud HTTP con Axios
Estilización de componentes en Vue.js
Comunicación de componentes con props
Uso de hooks de ciclo de vida en Vue
Introducción a los componentes
Introducción a Vue
Navegación programática y redirección
Uso de la directiva v-if en Vuejs
Crear componente Composition API
Realizar una solicitud GET con Fetch API en Vue
Uso avanzado de los composables
Galería de imágenes con navegación y rutas
Uso de rutas anidadas y dinámicas
Uso de la directiva v-for en Vuejs
Manejo de eventos con v-on
Crear un componente con Options API en Vue
Creación de rutas con Vue Router
Uso básico de los composables
Binding bidireccional con v-model y defineModel
Certificados de superación de Vuejs
Supera todos los retos de Vuejs y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
Vuejs
Definición y manejo de rutas
Navegación y enrutamiento