重新访问路由时触发过早

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

Vue Router过渡预览

🎯 任务

在本项目中,你将学习:

  • 如何在 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 文件中的问题。

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

    这里的更改是检查 valmatched.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中练习更多实验以提升技能。

您可能感兴趣的其他 JavaScript 教程