为 Vue Router 添加弃用警告

简介

在这个项目中，你将学习如何在 vue-router-3.4.9 版本的 router.addRoutes() 方法中添加弃用警告。这是一项重要的任务，因为 router.addRoutes() 方法在 Vue Router v3.5.0 中已被弃用，并在 Vue Router 4 中被移除。通过添加弃用警告，可以帮助使用旧版本 Vue Router 的开发者意识到即将到来的变化，并迁移到新的 router.addRoute() 方法。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 在 vue-router-3.4.9/src/index.js 文件中找到 addRoutes 方法
• 向 addRoutes 方法添加弃用警告
• 重新构建并发布更新后的 vue-router-3.4.9 包
• 重启应用程序并在浏览器控制台中观察警告消息

🏆 成果

完成这个项目后，你将能够：

• 识别并修改库中已弃用的方法
• 理解提供弃用警告以帮助开发者过渡到新版本的重要性
• 学习重新构建和发布库的更新版本的过程
• 在运行的应用程序中观察你的更改的效果

Skills Graph

向 router.addRoutes() 添加弃用警告

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

├── vue-router-3.4.9
├── vue.js
└── index.html

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

接下来，在虚拟机顶部打开 “Web 8080” 并手动刷新，你将看到页面。

打开浏览器控制台并观察打印输出，此时应该没有警告消息，如下所示。

在这一步中，你将学习如何在 vue-router-3.4.9 版本的 router.addRoutes() 方法中添加弃用警告。

1. 打开 vue-router-3.4.9/src/index.js 文件。

2. 找到 VueRouter 类的 addRoutes 方法。

3. 向该方法添加以下警告消息：

   addRoutes(routes: Array<RouteConfig>) {
     console.warn("router.addRoutes() 已弃用，并在 Vue Router 4 中被移除。请使用 router.addRoute() 代替。");
     this.matcher.addRoutes(routes);
     if (this.history.current!== START) {
       this.history.transitionTo(this.history.getCurrentLocation());
     }
   }

   这将在调用 addRoutes() 方法时向控制台打印一条警告消息。

重启应用程序并观察警告

在这一步中，你将重启应用程序并在浏览器控制台中观察警告消息。

1. 在终端中，导航到 vue-router-3.4.9 目录。

2. 运行命令 npm install 来安装依赖项。这个过程可能需要一些时间，请耐心等待。（如果长时间卡住，请按 Ctrl+C 终止进程，然后再次运行此命令。）

3. 所有依赖项成功安装后，运行命令 npm run build 来重新构建并发布项目。

4. 返回网页并刷新页面。

5. 打开浏览器控制台并观察输出。你应该会看到打印到控制台的警告消息：

   router.addRoutes() 已弃用，并在 Vue Router 4 中被移除。请使用 router.addRoute() 代替。

   这确认了弃用警告已成功添加到 router.addRoutes() 方法中。

恭喜你！你已通过在 vue-router-3.4.9 版本的 router.addRoutes() 方法中添加弃用警告完成了该项目。

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。