Corrigiendo la función cleanPath de Vue Router

Introducción

En este proyecto, aprenderás a corregir un error en la librería vue-router modificando la función cleanPath. La librería vue-router es una solución de enrutamiento popular para aplicaciones Vue.js, y es importante asegurarse de que funcione correctamente, especialmente para casos extremos como rutas que empiecen con múltiples barras diagonales.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Comprender el problema con la función cleanPath en la librería vue-router
• Instalar las dependencias necesarias para el proyecto
• Localizar y modificar la función cleanPath para corregir el problema
• Rebuild the project with the updated cleanPath function
• Probar la corrección para asegurarse de que el problema se ha resuelto

🏆 Logros

Después de completar este proyecto, podrás:

• Identificar y diagnosticar problemas en bibliotecas de terceros
• Modificar y actualizar el código en una biblioteca de terceros para corregir un error
• Rebuild and release a project with the updated code
• Probar la corrección para asegurarse de que el problema se ha resuelto

Configura la estructura del proyecto

En este paso, establecerás la estructura del proyecto y aprenderás sobre el problema en la librería vue-router y cómo corregirlo.

La librería vue-router tiene un error en la versión 3.5.2 donde una ruta que empieza con múltiples barras diagonales (///) puede redirigir a otro dominio. Esto se debe a que la función cleanPath en la librería solo reemplaza dos barras diagonales, en lugar de todas las múltiples barras diagonales.

Para corregir este problema, necesitarás modificar la función cleanPath en el archivo vue-router-3.5.2/src/util/path.js.

Para comenzar, observa la estructura de directorio de los archivos en el lado izquierdo como sigue:

├── vue-router-3.5.2
├── vue.js
└── index.html

1. Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.
2. Abre "Web 8080" en la parte superior de la VM y actualízala manualmente, el efecto debería ser el siguiente:

3. Copia la dirección de la imagen anterior para abrir una nueva ventana en tu navegador y haz clic en el botón "Go to Foo" y la página saltará a una página de Google.

Corrige la función cleanPath

1. Abre el archivo vue-router-3.5.2/src/util/path.js.

2. Localiza la función cleanPath:

   export function cleanPath(path: string): string {
     return path.replace(/\/\//g, "/");
   }
   

3. Actualiza la función cleanPath para reemplazar todas las múltiples barras diagonales con una sola barra diagonal:

   export function cleanPath(path: string): string {
     return path.replace(/\/+/g, '/');
   }
   

   La expresión regular /\/+/g coincidirá con una o más barras diagonales consecutivas y las reemplazará con una sola barra diagonal.

Reconstruye y prueba el proyecto

1. En la terminal, navega hasta el directorio vue-router-3.5.2.
2. Ejecuta el comando npm install para instalar las dependencias. Este proceso puede tardar un tiempo, por favor, sea paciente. (Si se queda atascado durante mucho tiempo, presione Ctrl+C para terminar el proceso y luego ejecute este comando nuevamente.)
3. Después de que todas las dependencias se hayan instalado correctamente, ejecuta el comando npm run build para reconstruir y liberar el proyecto con la función cleanPath actualizada.
4. Vuelve a la página web y actualiza la página.
5. Haz clic en el botón "Go to Foo", y deberías ver que la página ya no se redirige a una página de Google, sino que permanece en la aplicación local.

¡Felicidades! Has corrido con éxito el problema en la librería vue-router actualizando la función cleanPath.

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.