Ejercicio de programación con Vuejs: Definición y manejo de rutas en Vue

Código
Puntuación
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 directorio src.
  • Las rutas deben estar definidas utilizando createRouter y createWebHistory.
  • 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>
Empezar ejercicio de programación

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.

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

Vue.js

Vuejs

Definición y manejo de rutas

Navegación y enrutamiento

Otros tutoriales de programación con Vuejs