Definición y manejo de rutas en Vue

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>