La revisión de la ruta se activa demasiado temprano

Introducción

En este proyecto, aprenderás a corregir un error en Vue Router v2.5.2 donde la función next() de beforeRouteUpdate se activa demasiado temprano al revisitar una ruta en una transición "out-in".

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo localizar y entender el problema en el archivo vue-router-2.5.2/src/components/view.js
• Cómo corregir el problema actualizando la función data.registerRouteInstance
• Cómo reconstruir el proyecto vue-router-2.5.2 con la corrección
• Cómo probar la corrección para asegurarse de que el problema se resuelva

🏆 Logros

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

• Identificar y corregir problemas en la biblioteca Vue Router
• Reconstruir un proyecto después de realizar cambios de código
• Probar y verificar la corrección para asegurarse de que resuelva el problema

Corrigiendo el problema

Para comenzar, observa la estructura de directorio de los archivos en el lado izquierdo, como se muestra a continuación:

├── vue-router-2.5.2
├── vue2.2.6.js
└── index.html

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

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver el efecto de la página tal como se describe a continuación:

• Cuando haces clic en "to /", la página mostrará "This is A".
• Cuando haces clic en "to /b", la página mostrará "This is B".
• Cuando haces clic en "to /" nuevamente, la página mostrará "This is".

En este paso, corregirás el problema en el archivo vue-router-2.5.2/src/components/view.js.

1. Abre el archivo vue-router-2.5.2/src/components/view.js.

2. Localiza la línea 53 del archivo, que es la función data.registerRouteInstance.

3. Actualiza la función data.registerRouteInstance de la siguiente manera:

   data.registerRouteInstance = (vm, val) => {
     // val podría ser indefinido para la desregistración
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };
   

   El cambio aquí es comprobar si val y matched.instances[name] son diferentes, o si val es falso (falsy) y matched.instances[name] es el mismo que vm. Esto asegura de que el hook registerRouteInstance solo se llame cuando la instancia ha cambiado realmente.

4. Guarda los cambios en el archivo view.js.

Reconstruir y probar el proyecto

En este paso, reconstruirás el proyecto vue-router-2.5.2 y probarás el efecto corregido.

1. Abre el directorio vue-router-2.5.2 en la terminal.
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 liberar el proyecto.
4. Abre la pestaña "Web 8080" en la VM para ver la aplicación actualizada.
5. Haz clic en los botones "to /", "to /b" y "to /" para verificar que el problema se haya corregido.

La página ahora debería mostrar el contenido correcto al revisitar la ruta, como se muestra en el efecto actualizado:

¡Felicitaciones! Has corregido con éxito el problema en la versión vue-router-2.5.2 del código.

Resumen

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