路由器查询值已更改

介绍

在本项目中，你将学习如何解决 vue-router v3.4.0 版本中的一个问题，即现在路由器查询中的未定义值已更改为未定义字符串。你将通过修改 vue-router 库的query.js文件中的resolveQuery函数来修复此问题。

👀 预览

🎯 任务

在本项目中，你将学习：

• 找到并理解query.js文件中的resolveQuery函数
• 修改resolveQuery函数以正确处理查询中的未定义值
• 使用修复后的代码重新构建 vue-router 3.4.0 项目
• 测试修复以确保查询中的未定义值现在正确显示为空字符串

🏆 成果

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

• 识别并修复第三方库中的问题
• 应用修改和重新构建项目的技术来应用修复
• 理解全面测试更改以确保实现预期行为的重要性

设置项目结构

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

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

1. 点击 WebIDE 右下角的Go Live按钮来运行项目。
2. 打开虚拟机顶部的“Web 8080”并手动刷新，效果应如下所示：

3. 将上述图片中的地址复制到浏览器中并打开一个新窗口，查看地址栏以及页面的样子。

解决 Vue-Router 3.4.0 中的未定义查询值问题

在这一步中，你将学习如何解决 vue-router v3.4.0 版本中路由器查询中的未定义值现在被更改为未定义字符串的问题。

1. 打开vue-router-3.4.0/src/util/query.js文件。
2. 在文件中找到resolveQuery函数。
3. 更新resolveQuery函数以处理查询中的未定义值。将代码修改如下：

export function resolveQuery(
  query:?string,
  extraQuery: Dictionary<string> = {},
  _parseQuery:?Function
): Dictionary<string> {
  //...

  // TODO
  for (const key in extraQuery) {
    const value = extraQuery[key];
    parsedQuery[key] = Array.isArray(value)
   ? value.map((v) => (!v? v : "" + v))
      :!value
       ? value
        : "" + value;
  }
  return parsedQuery;
}

关键更改如下：

• 在parsedQuery[key] =...赋值中，我们检查value是否为undefined。如果是，我们赋一个空字符串''而不是undefined值。
• 对于数组值，我们还检查各个元素是否为undefined，并将它们替换为空字符串。

这确保了查询中的未定义值得到正确处理，不会被转换为未定义字符串。

测试修复结果

1. 在终端中打开vue-router-3.4.0目录。
2. 运行命令npm install来安装依赖项。这个过程可能需要一些时间，请耐心等待。（如果长时间卡住，请按Ctrl + C终止进程，然后再次运行此命令。）
3. 所有依赖项成功安装后，运行命令npm run build来重新构建并发布项目。
4. 刷新显示初始页面的浏览器窗口。
5. 观察页面的行为以及地址栏中的 URL。查询中的未定义值现在应该被正确处理并显示为空字符串。

恭喜！你已成功修复 vue-router 3.4.0 版本中的未定义查询值问题。

总结

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