蓝桥杯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 服务】,在浏览器预览页面效果如下:
蓝桥杯Web练习题:多个斜线开始的路径重定向问题_第1张图片
修复流程
切换到 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 服务】,查看和测试修复后的效果。
蓝桥杯Web练习题:多个斜线开始的路径重定向问题_第2张图片
提交代码
问题修复完成后,请点击「提交检测」,系统将会自动检测是否满足要求。

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

题解:

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


<div id="app">
  <h1>Hello App!h1>
  <p>
  	
    <router-link to="///www.baidu.com">Go to Foorouter-link>
    <router-link to="/bar">Go to Barrouter-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 不会进行跳转,是因为只有一个 /。
蓝桥杯Web练习题:多个斜线开始的路径重定向问题_第3张图片
那我们要干的事情就很明确了,将三个 /// 替换成一个 /
提交通过。

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, '/')
}

你可能感兴趣的:(蓝桥杯Web练习,蓝桥杯,web,css,前端,javascript)