Empty pathMatch for Correct Path Calculation

Introduction

In this project, you will learn how to fix a bug in the vue-router-3.1.5 library. The bug is related to the fillParams function, which is responsible for filling in the parameters in the URL path. When the pathMatch parameter is an empty string, it can affect the calculation of the correct path.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to locate the fillParams function in the vue-router-3.1.5/src/util/params.js file
• How to modify the fillParams function to address the issue with empty pathMatch
• How to rebuild the vue-router project with the updated fillParams function
• How to test the fix by refreshing the browser window and verifying the correct behavior of the address bar

🏆 Achievements

After completing this project, you will be able to:

• Identify and fix bugs in a third-party library
• Rebuild a project after making code changes
• Test a fix to ensure the desired behavior is achieved

Skills Graph

Fix the fillParams Function

To get started, look at the directory structure of the files on the left as follows:

├── vue-router-3.1.5
├── vue.js
└── index.html

1. Click on Go Live button in the bottom right corner of WebIDE, to run the project.

2. Open "Web 8080" on the top of the VM and refresh it manually, the effect should be as follows:

   

3. Copy the address in the above figure in the browser to open a new window, respectively, click on the "[button1]" button and "[button2]" button, the effect of the address bar is as follows:

   

In this step, you will fix the fillParams function in the vue-router-3.1.5/src/util/params.js file to address the issue with empty pathMatch.

1. Open the vue-router-3.1.5/src/util/params.js file.
2. Locate the fillParams function.
3. Add the following code after the line if (params.pathMatch) params[0] = params.pathMatch:

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

This code checks if params.pathMatch is an empty string. If it is, the function will return the original path instead of trying to fill the parameters.

The updated fillParams function should look like this:

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];
  }
}

Rebuild and Test the vue-router Project

In this step, you will test the fix by refreshing the browser window.

1. Open the vue-router-3.1.5 directory in the terminal.
2. Run the command npm install to install the dependencies. This process might take a while, please be patient. (If it gets stuck for a long time, please press Ctrl+C to terminate the process and then run this command again.)
3. After all dependencies have been successfully installed, run the command npm run build to rebuild and release the project.
4. Go back to the browser window and refresh the page.
5. Click on the "[button1]" and "[button2]" buttons again, and observe the behavior of the address bar.

The address bar should now display the correct path, even when pathMatch is an empty string. The image of the effect after the problem is fixed is shown below:

Congratulations! You have successfully fixed the issue in the vue-router-3.1.5 library.

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.