重新访问路由时触发过早

介绍

在本项目中，你将学习如何修复 Vue Router v2.5.2 中的一个漏洞，即在“出 - 进”过渡中重新访问路由时，beforeRouteUpdate 的 next() 函数触发过早。

👀 预览

🎯 任务

在本项目中，你将学习：

• 如何在 vue-router-2.5.2/src/components/view.js 文件中定位和理解问题
• 如何通过更新 data.registerRouteInstance 函数来修复问题
• 如何使用修复后的代码重新构建 vue-router-2.5.2 项目
• 如何测试修复以确保问题得到解决

🏆 成果

完成本项目后，你将能够：

• 识别并修复 Vue Router 库中的问题
• 在进行代码更改后重新构建项目
• 测试并验证修复以确保问题得到解决

修复问题

首先，查看左侧文件的目录结构如下：

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

点击 WebIDE 右下角的Go Live按钮来运行项目。

接下来，在 VM 顶部打开“Web 8080”并手动刷新，以查看如下页面效果：

• 当你点击“to /”时，页面将显示“This is A”。
• 当你点击“to /b”时，页面将显示“This is B”。
• 当你再次点击“to /”时，页面将显示“This is”。

在这一步中，你将修复 vue-router-2.5.2/src/components/view.js 文件中的问题。

1. 打开 vue-router-2.5.2/src/components/view.js 文件。

2. 找到文件的第 53 行，即 data.registerRouteInstance 函数。

3. 按如下方式更新 data.registerRouteInstance 函数：

   data.registerRouteInstance = (vm, val) => {
     // val 对于注销可能为 undefined
     var current = matched.instances[name];
     if ((val && current !== vm) || (!val && current === vm)) {
       matched.instances[name] = val;
     }
   };
   

   这里的更改是检查 val 和 matched.instances[name] 是否不同，或者 val 是否为假值且 matched.instances[name] 与 vm 相同。这确保了只有当实例实际发生变化时才调用 registerRouteInstance 钩子。

4. 保存对 view.js 文件所做的更改。

重新构建并测试项目

在这一步中，你将重新构建 vue-router-2.5.2 项目并测试修复后的效果。

1. 在终端中打开 vue-router-2.5.2 目录。
2. 运行命令 npm install 来安装依赖项。这个过程可能需要一些时间，请耐心等待。（如果长时间卡住，请按 Ctrl+C 终止进程，然后再次运行此命令。）
3. 所有依赖项成功安装后，运行命令 npm run build 来重新构建并发布项目。
4. 在 VM 中打开“Web 8080”标签页以查看更新后的应用程序。
5. 点击“to /”、“to /b”和“to /”按钮，以验证问题是否已修复。

现在，重新访问路由时页面应显示正确的内容，如更新后的效果所示：

恭喜！你已成功修复了 vue-router-2.5.2 版本代码中的问题。

总结

恭喜！你已完成本项目。你可以在 LabEx 中练习更多实验以提升技能。