El valor de la consulta del enrutador ha cambiado

Introducción

En este proyecto, aprenderás a resolver un problema en la versión 3.4.0 de vue-router donde los valores indefinidos en las consultas de enrutador ahora se han cambiado a cadenas indefinidas. Corregirás este problema modificando la función resolveQuery en el archivo query.js de la biblioteca vue-router.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Localizar y entender la función resolveQuery en el archivo query.js
• Modificar la función resolveQuery para manejar adecuadamente los valores indefinidos en la consulta
• Rebuild el proyecto vue-router 3.4.0 con la corrección
• Probar la corrección para asegurarse de que los valores indefinidos en la consulta se muestren ahora correctamente como cadenas vacías

🏆 Logros

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

• Identificar y corregir problemas en una biblioteca de terceros
• Aplicar técnicas para modificar y reconstruir un proyecto para aplicar una corrección
• Comprender la importancia de probar detenidamente los cambios para asegurarse de que se logre el comportamiento deseado

Skills Graph

Configurar la estructura del proyecto

Para comenzar, observa la estructura de directorio de los archivos en la izquierda, como sigue:

├── vue-router-3.4.0
├── 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 en tu navegador y abre una nueva ventana para ver la barra de direcciones y cómo se ve la página.

Resolver el problema de valores de consulta indefinidos en Vue-Router 3.4.0

En este paso, aprenderás a resolver el problema en el que los valores indefinidos en las consultas de enrutador ahora se convierten en cadenas indefinidas en la versión 3.4.0 de vue-router.

1. Abre el archivo vue-router-3.4.0/src/util/query.js.
2. Localiza la función resolveQuery en el archivo.
3. Actualiza la función resolveQuery para manejar los valores indefinidos en la consulta. Modifica el código como sigue:

export function resolveQuery(
  query:?string,
  extraQuery: Dictionary<string> = {},
  _parseQuery:?Function
): Dictionary<string> {
  //...

  // TODO
  for (const key in extraQuery) {
    const value = extraQuery[key];
    parsedQuery[key] = Array.isArray(value)
   ? value.map((v) => (!v? v : "" + v))
      :!value
       ? value
        : "" + value;
  }
  return parsedQuery;
}

Los cambios principales son:

• En la asignación parsedQuery[key] =..., verificamos si el value es undefined. Si es así, asignamos una cadena vacía '' en lugar del valor undefined.
• Para valores de matriz, también verificamos si los elementos individuales son undefined y los reemplazamos con una cadena vacía.

Esto garantiza que los valores indefinidos en la consulta se manejen adecuadamente y no se conviertan en cadenas indefinidas.

Probar la corrección

1. Abre el directorio vue-router-3.4.0 en la terminal.
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. Una vez que todas las dependencias se hayan instalado correctamente, ejecuta el comando npm run build para reconstruir y liberar el proyecto.
4. Actualiza la ventana del navegador que estaba mostrando la página inicial.
5. Observa el comportamiento de la página y la URL en la barra de direcciones. Los valores indefinidos en la consulta ahora deben ser manejados correctamente y mostrarse como cadenas vacías.

¡Felicitaciones! Has corrido con éxito el problema de valores de consulta indefinidos en la versión 3.4.0 de vue-router.

Resumen

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