pathMatch vacío para el cálculo correcto de la ruta

Introducción

En este proyecto, aprenderás cómo corregir un error en la librería vue-router-3.1.5. El error está relacionado con la función fillParams, que se encarga de llenar los parámetros en la ruta de la URL. Cuando el parámetro pathMatch es una cadena vacía, puede afectar el cálculo de la ruta correcta.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo localizar la función fillParams en el archivo vue-router-3.1.5/src/util/params.js
• Cómo modificar la función fillParams para resolver el problema con pathMatch vacío
• Cómo reconstruir el proyecto vue-router con la función fillParams actualizada
• Cómo probar la corrección actualizando la ventana del navegador y verificando el comportamiento correcto de la barra de direcciones

🏆 Logros

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

• Identificar y corregir errores en una librería de terceros
• Reconstruir un proyecto después de realizar cambios de código
• Probar una corrección para asegurarse de que se logre el comportamiento deseado

Corregir la función fillParams

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

├── vue-router-3.1.5
├── 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 figura anterior en el navegador para abrir una nueva ventana, respectivamente, haz clic en los botones "[button1]" y "[button2]", el efecto de la barra de direcciones es el siguiente:

En este paso, corregirás la función fillParams en el archivo vue-router-3.1.5/src/util/params.js para resolver el problema con pathMatch vacío.

1. Abre el archivo vue-router-3.1.5/src/util/params.js.
2. Localiza la función fillParams.
3. Agrega el siguiente código después de la línea if (params.pathMatch) params[0] = params.pathMatch:

if (params.pathMatch === "") params[0] = "";

Este código verifica si params.pathMatch es una cadena vacía. Si es así, la función devolverá la path original en lugar de intentar llenar los parámetros.

La función fillParams actualizada debería verse así:

export function fillParams(
  path: string,
  params:?Object,
  routeMsg: string
): string {
  params = params || {};
  try {
    const filler =
      regexpCompileCache[path] ||
      (regexpCompileCache[path] = Regexp.compile(path));

    // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
    if (params.pathMatch) params[0] = params.pathMatch;
    if (params.pathMatch === "") params[0] = "";

    return filler(params, { pretty: true });
  } catch (e) {
    if (process.env.NODE_ENV!== "production") {
      // Fix #3072 no warn if `pathMatch` is string
      warn(
        typeof params.pathMatch === "string",
        `missing param for ${routeMsg}: ${e.message}`
      );
    }
    return "";
  } finally {
    // delete the 0 if it was added
    delete params[0];
  }
}

Reconstruir y probar el proyecto vue-router

En este paso, probarás la corrección actualizando la ventana del navegador.

1. Abre el directorio vue-router-3.1.5 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 se hayan instalado correctamente todas las dependencias, ejecuta el comando npm run build para reconstruir y liberar el proyecto.
4. Vuelve a la ventana del navegador y actualiza la página.
5. Haz clic nuevamente en los botones "[button1]" y "[button2]" y observa el comportamiento de la barra de direcciones.

Ahora, la barra de direcciones debería mostrar la ruta correcta, incluso cuando pathMatch es una cadena vacía. A continuación, se muestra la imagen del efecto después de que se haya corregido el problema:

¡Felicitaciones! Has corrido con éxito el problema en la librería vue-router-3.1.5.

Resumen

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