简介 在本项目中,你将学习如何修复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库中的问题 在进行代码更改后重新构建项目 测试并验证修复以确保问题得到解决 Skills Graph %%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript(("`JavaScript`")) -.-> javascript/NetworkingGroup(["`Networking`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/NetworkingGroup -.-> javascript/http_req("`HTTP Requests`") subgraph Lab Skills javascript/functions -.-> lab-445771{{"`重新访问路由时触发过早`"}} javascript/dom_manip -.-> lab-445771{{"`重新访问路由时触发过早`"}} javascript/event_handle -.-> lab-445771{{"`重新访问路由时触发过早`"}} javascript/http_req -.-> lab-445771{{"`重新访问路由时触发过早`"}} end
修复问题 首先,查看左侧文件的目录结构如下: ├── 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 文件中的问题。 打开 vue-router-2.5.2/src/components/view.js 文件。 找到文件的第53行,即 data.registerRouteInstance 函数。 按如下方式更新 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 钩子。 保存对 view.js 文件所做的更改。
重新构建并测试项目 在这一步中,你将重新构建 vue-router-2.5.2 项目并测试修复后的效果。 在终端中打开 vue-router-2.5.2 目录。 运行命令 npm install 来安装依赖项。这个过程可能需要一些时间,请耐心等待。(如果长时间卡住,请按 Ctrl+C 终止进程,然后再次运行此命令。) 所有依赖项成功安装后,运行命令 npm run build 来重新构建并发布项目。 在VM中打开 “Web 8080” 标签页以查看更新后的应用程序。 点击 “to /”、“to /b” 和 “to /” 按钮,以验证问题是否已修复。 现在,重新访问路由时页面应显示正确的内容,如更新后的效果所示: 恭喜!你已成功修复了 vue-router-2.5.2 版本代码中的问题。