蓝桥杯Web练习题：多个斜线开始的路径重定向问题

多个斜线开始的路径重定向问题

需求说明

在 vue-router v3.5.2 版本代码中存在一个 Bug，一个以多个斜线（///）开始的路径实际上可能会重定向到另一个域。这是因为 cleanPath 函数只替换了两个斜线。请修复此问题。

知识技能

修复本问题，需要具备的知识技能：

掌握 JavaScript 基础语法。

掌握正则表达式。

问题复现

请开启线上实验环境，输入下面的命令下载初始代码。

wget https://labfile.oss.aliyuncs.com/courses/5036/vue-router-01-full.zip && unzip vue-router-01-full.zip&&rm vue-router-01-full.zip

选中左侧文件树中 index.html 右键 Open with Live Server 启动 Web 服务，然后点击环境右侧工具栏中的【Web 服务】，在浏览器预览页面效果如下：



修复流程

切换到 vue-router-3.5.2 目录下。

定位 vue-router-3.5.2/src/util/path.js 文件的 cleanPath 函数，根据复现的问题进行解决。

export function cleanPath(path: string): string {

return path.replace(////g, "/");

}

copy

修复完成后，在 vue-router-3.5.2 目录下，通过 npm run build 命令重新打包发布。

图片描述

重新点击【Web 服务】，查看和测试修复后的效果。



提交代码

问题修复完成后，请点击「提交检测」，系统将会自动检测是否满足要求。

总通过次数: 285 | 总提交次数: 339 | 通过率: 84.1%

题解：

我们先从index.html中的路由跳转看，此处跳转的链接带着三个 / / /

<div id="app">
  <h1>Hello App!</h1>
  <p>
  	<!-- 重点。此处跳转的链接是三个 /// --->
    <router-link to="///www.baidu.com">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <router-view></router-view>
</div>

我们在js中将return注释，将结果 log一下，看看这个正则它干了啥

export function cleanPath (path: string): string {
  const path1 =  path.replace(/\/\//g, '/')
  console.log(path1)
  // return path.replace(/\/\//g, '/')
}

o，看到这我们就明白了，原先的三个 /// 斜线，被替换成成了两个 // ，而原先的 /bar 不会进行跳转，是因为只有一个 /。



那我们要干的事情就很明确了，将三个 /// 替换成一个 /

提交通过。

export function cleanPath (path: string): string {
  const path1 = path.replace(/\/\//g, '/')
  const path2 = path1.replace(/\/\//g, '/')
  const path3 = path2.replace(/\/\//g, '/')
  console.log(path1, path2, path3)
  return path3
}

正确的写法应该是要通过正则 +号，进行贪心匹配

export function cleanPath (path: string): string {
  return path.replace(/\/+/g, '/')
}