Elimina la advertencia generada por pathMatch

Introducción

En este proyecto, aprenderás cómo solucionar un problema de advertencia en la biblioteca vue-router 3.1.3. El vue-router es una popular biblioteca de enrutamiento para aplicaciones de Vue.js, y la versión 3.1.3 tenía un error que generaba una advertencia cuando el parámetro pathMatch era un valor vacío. Siguiendo la guía paso a paso, podrás localizar el problema, corregir el código y reconstruir la biblioteca para resolver la advertencia.

🎯 Tareas

En este proyecto, aprenderás:

• Cómo identificar el problema en el archivo params.js de la biblioteca vue-router 3.1.3
• Cómo corregir el código para eliminar la advertencia
• Cómo reconstruir la biblioteca vue-router 3.1.3 con la corrección
• Cómo probar la versión corregida para asegurarse de que la advertencia ya no se muestra

🏆 Logros

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

• Solucionar y corregir problemas en una biblioteca de terceros
• Comprender la importancia de mantener actualizadas las dependencias y corregir los errores conocidos
• Demostrar el proceso de reconstrucción de una biblioteca después de realizar cambios de código
• Probar la funcionalidad de una biblioteca para asegurarse de que funcione como se espera

Corrige la advertencia en Vue-Router 3.1.3

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

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

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente, haz clic en "/nope/", luego haz clic en "test" y abre la opción Console en la consola del navegador, verás el siguiente mensaje:

[vue-router] missing param for named route "NotFound": Expected "0" to be defined

En este paso, aprenderás cómo corregir la advertencia generada por el problema de pathMatch en el código de vue-router 3.1.3.

1. Abre el archivo vue-router-3.1.3/src/util/params.js.
2. Localiza el código en la línea 28 que está causando la advertencia:

if (process.env.NODE_ENV !== "production") {
  warn(false, `missing param for ${routeMsg}: ${e.message}`);
}

3. Comenta la llamada a la función warn para eliminar la advertencia:

if (process.env.NODE_ENV !== "production") {
  // warn(false, `missing param for ${routeMsg}: ${e.message}`)
}

Esto evitará que la advertencia se muestre en la consola.

Reconstruir y probar el proyecto de Vue-Router 3.1.3

En este paso, reconstruirás y probarás el proyecto de vue-router 3.1.3 después de corregir la advertencia.

1. Abre una terminal y navega hasta el directorio vue-router-3.1.3.
2. Ejecuta el comando npm install para instalar las dependencias. Este proceso puede tardar un tiempo, por favor, sea paciente. (Si se atasca durante mucho tiempo, presione Ctrl+C para terminar el proceso y luego ejecute este comando nuevamente.)
3. Una vez que todas las dependencias se hayan instalado correctamente, ejecuta el comando npm run build para reconstruir y liberar el proyecto. Esto generará una nueva compilación de la biblioteca vue-router 3.1.3 con la corrección de la advertencia.
4. Abre la página Web 8080 en tu navegador.
5. Haz clic en el enlace "/nope/", luego haz clic en el enlace "test".
6. Abre la consola del navegador y verifica que el mensaje de advertencia ya no se muestre.

¡Felicitaciones! Has solucionado con éxito el problema de advertencia en la biblioteca vue-router 3.1.3.

Resumen

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