Router Query Value Changed

Introduction

In this project, you will learn how to resolve an issue in the vue-router v3.4.0 version where undefined values in router queries are now changed to undefined strings. You will fix this issue by modifying the resolveQuery function in the query.js file of the vue-router library.

👀 Preview

🎯 Tasks

In this project, you will learn:

• Locate and understand the resolveQuery function in the query.js file
• Modify the resolveQuery function to properly handle undefined values in the query
• Rebuild the vue-router 3.4.0 project with the fix
• Test the fix to ensure that undefined values in the query are now correctly displayed as empty strings

🏆 Achievements

After completing this project, you will be able to:

• Identify and fix issues in a third-party library
• Apply techniques for modifying and rebuilding a project to apply a fix
• Understand the importance of thoroughly testing changes to ensure the desired behavior is achieved

Set Up the Project Structure

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

├── vue-router-3.4.0
├── 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 image above in your browser and open a new window to see the address bar and how the page looks.

   

Resolve the Undefined Query Value Issue in Vue-Router 3.4.0

In this step, you will learn how to resolve the issue where undefined values in router queries are now changed to undefined strings in the vue-router v3.4.0 version.

1. Open the vue-router-3.4.0/src/util/query.js file.
2. Locate the resolveQuery function in the file.
3. Update the resolveQuery function to handle the undefined values in the query. Modify the code as follows:

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

The key changes are:

• In the parsedQuery[key] = ... assignment, we check if the value is undefined. If it is, we assign an empty string '' instead of the undefined value.
• For array values, we also check if the individual elements are undefined and replace them with an empty string.

This ensures that undefined values in the query are properly handled and are not converted to undefined strings.

Test the Fix

1. Open the vue-router-3.4.0 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. Refresh the browser window that was displaying the initial page.

5. Observe the behavior of the page and the URL in the address bar. The undefined values in the query should now be correctly handled and displayed as empty strings.

   

Congratulations! You have successfully fixed the undefined query value issue in the vue-router 3.4.0 version.

Summary

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