Revisit Route Triggers Too Early

Introduction

In this project, you will learn how to fix a bug in the Vue Router v2.5.2 where the beforeRouteUpdate next() function is triggered too early when revisiting a route in an "out-in" transition.

👀 Preview

🎯 Tasks

In this project, you will learn:

• How to locate and understand the issue in the vue-router-2.5.2/src/components/view.js file
• How to fix the issue by updating the data.registerRouteInstance function
• How to rebuild the vue-router-2.5.2 project with the fix
• How to test the fix to ensure the issue is resolved

🏆 Achievements

After completing this project, you will be able to:

• Identify and fix issues in the Vue Router library
• Rebuild a project after making code changes
• Test and verify the fix to ensure it resolves the issue

Fixing the Issue

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

├── vue-router-2.5.2
├── vue2.2.6.js
└── index.html

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

Next, open "Web 8080" at the top of the VM and refresh it manually to see the page effect as described below:

• When you click "to /", the page will display "This is A".
• When you click "to /b", the page will display "This is B".
• When you click "to /" again, the page will display "This is".

In this step, you will fix the issue in the vue-router-2.5.2/src/components/view.js file.

1. Open the vue-router-2.5.2/src/components/view.js file.

2. Locate the line 53 of the file, which is the data.registerRouteInstance function.

3. Update the data.registerRouteInstance function as follows:

   data.registerRouteInstance = (vm, val) => {
     // val could be undefined for unregistration
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };
   

   The change here is to check if the val and matched.instances[name] are different, or if val is falsy and matched.instances[name] is the same as vm. This ensures that the registerRouteInstance hook is only called when the instance has actually changed.

4. Save the changes to the view.js file.

Rebuild and Test the Project

In this step, you will rebuild the vue-router-2.5.2 project and test the fixed effect.

1. Open the vue-router-2.5.2 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. Open the "Web 8080" tab in the VM to see the updated application.
5. Click on the "to /", "to /b", and "to /" buttons to verify that the issue has been fixed.

The page should now display the correct content when revisiting the route, as shown in the updated effect:

Congratulations! You have successfully fixed the issue in the vue-router-2.5.2 version of the code.

Summary

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