Agregar advertencia de desaprobación a Vue Router

Introducción

En este proyecto, aprenderás cómo agregar una advertencia de desaprobación al método router.addRoutes() en la versión vue-router-3.4.9. Esta es una tarea importante ya que el método router.addRoutes() ha sido desaprobado en Vue Router v3.5.0 y ha sido eliminado en Vue Router 4. Al agregar la advertencia de desaprobación, puedes ayudar a los desarrolladores que usan la versión anterior de Vue Router a ser conscientes de los cambios que se avecinan y migrar al nuevo método router.addRoute().

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Localizar el método addRoutes en el archivo vue-router-3.4.9/src/index.js
• Agregar una advertencia de desaprobación al método addRoutes
• Reconstruir y publicar el paquete actualizado de vue-router-3.4.9
• Reiniciar la aplicación y observar el mensaje de advertencia en la consola del navegador

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Identificar y modificar métodos desaprobados en una biblioteca
• Comprender la importancia de proporcionar advertencias de desaprobación para ayudar a los desarrolladores a migrar a versiones más recientes
• Aprender el proceso de reconstrucción y publicación de una versión actualizada de una biblioteca
• Observar los efectos de tus cambios en la aplicación en ejecución

Agregar una advertencia de desaprobación a router.addRoutes()

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

├── vue-router-3.4.9
├── 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 y verás la página.

Abre la consola del navegador y observa la salida, que debería verse como la siguiente sin mensajes de advertencia.

En este paso, aprenderás cómo agregar una advertencia de desaprobación al método router.addRoutes() en la versión vue-router-3.4.9.

1. Abre el archivo vue-router-3.4.9/src/index.js.

2. Localiza el método addRoutes de la clase VueRouter.

3. Agrega el siguiente mensaje de advertencia al método:

   addRoutes(routes: Array<RouteConfig>) {
     console.warn("router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.");
     this.matcher.addRoutes(routes);
     if (this.history.current!== START) {
       this.history.transitionTo(this.history.getCurrentLocation());
     }
   }
   

   Esto imprimirá un mensaje de advertencia en la consola cuando se llame al método addRoutes().

Reiniciar la aplicación y observar la advertencia

En este paso, reiniciarás la aplicación y observarás el mensaje de advertencia en la consola del navegador.

1. En la terminal, navega hasta el directorio vue-router-3.4.9.

2. Ejecuta el comando npm install para instalar las dependencias. Este proceso puede tomar 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 publicar el proyecto.

4. Vuelve a la página web y actualiza la página.

5. Abre la consola del navegador y observa la salida. Deberías ver el mensaje de advertencia impreso en la consola:

   router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.
   

   Esto confirma que la advertencia de desaprobación se ha agregado correctamente al método router.addRoutes().

¡Felicitaciones! Has completado el proyecto agregando una advertencia de desaprobación al método router.addRoutes() en la versión vue-router-3.4.9.

Resumen

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