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

Skills Graph

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.