蓝桥杯 蓝桥云课 楼赛 第29期 Vue Router解析

恭喜我浪费生命中的3个小时

#0前排提示 需要下载的控制台命令直接shift+insert就可以粘贴进去，不要一点点打。

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

这里不止匹配一个/所以改成贪心的正则表达式，为/\/+/g

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

#2路由器查询中的未定义值现在变为未定义字符串

这里语句意识大概是对于extraQuery中的每个value,如果value是一个数组把value内的每个元素通过拼串转化为字符串，如果不是，就把value本身拼成字符串，用了一个三目运算符和map方法。

题目中的问题即是在此处转化中没有判断变量是否为null或undefined，所以这里用!(变量)修改。

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

#3警告已弃用的 addRoutes

这里直接在目标文件和代码段中使用console.warn()方法，一开始真不知道还有这个方法，平时都是console.log来着。

另外文件本身有一堆报错也不用管。

  addRoutes (routes: Array<RouteConfig>) {
    console.warn("router.addRoutes() is deprecated and has been removed in Vue Router 4. Use router.addRoute() instead.")这里直接加警告
    this.matcher.addRoutes(routes)
    if (this.history.current !== START) {
      this.history.transitionTo(this.history.getCurrentLocation())
    }
  }
}

#4修复 async.spec.js 中的测试

他这个写法比较绕，原来setTimeout(done, 0)直接跳出函数了，改成next

describe('Async utils', () => {
  describe('runQueue', () => {
    it('should work', done => {
      const calls = []
      const queue = [1, 2, 3].map(i => next => {
        calls.push(i)
        setTimeout(next, 0)//这里done改成了next
      })
      runQueue(queue, (fn, next) => fn(next), () => {
        expect(calls).toEqual([1, 2, 3, 4, 5])
        done()
      })
    })
  })
})

#5当 pathMatch 为空字符串时正确计算路径

第一个if是正常按钮的判断，这里加一个if判断是否为空字符串，返回空字符串，解决出错

  try {
    const filler =
      regexpCompileCache[path] ||
      (regexpCompileCache[path] = Regexp.compile(path))

    // Fix #2505 resolving asterisk routes { name: 'not-found', params: { pathMatch: '/not-found' }}
    if (params.pathMatch) params[0] = params.pathMatch
    if (params.pathMatch==='') params[0] ='';//修改后哦

    return filler(params, { pretty: true })
  } 

#6正确警告错误的 v-slot 使用

根据这里的报错定位到不能读取这个to,去掉to前的一个props即可

 #7正确获取 query 参数中的对象参数

ps题外话:属于是专门找bug出题了

 

 通过报错示例发现，直接返回value本身能通过96%的例子，但是数字会直接返回数字，所以这里取巧的一个办法是对数字进行字符化。（对，写到这里我才看懂报错里面还有示例）

const castQueryParamValue = value => (typeof value=='number'? ''+value :value)

#8正确处理空值

这里如果有一个是空的直接返回就ok

function isObjectEqual (a = {}, b = {}): boolean {
  if (!a || !b) return a === b;//加的
  const aKeys = Object.keys(a)
  const bKeys = Object.keys(b)
  if (aKeys.length !== bKeys.length) {
    return false
  }
  return aKeys.every(key => {
    const aVal = a[key]
    const bVal = b[key]
    // check nested equality
    if (typeof aVal === 'object' && typeof bVal === 'object') {
      return isObjectEqual(aVal, bVal)
    }
    return String(aVal) === String(bVal)
  })
}

#9去掉 pathMatch 产生的警告

警告？直接注释掉，一下秒了，有什么好说的

    if (process.env.NODE_ENV !== 'production') {
      // warn(false, `missing param for ${routeMsg}: ${e.message}`)
    }

#10重新访问时，路由过早触发

看一眼解析啊对对，你们写的对呗

上面是原来的，下面是vue源码，别问，问就是不会了

 data.registerRouteInstance = (vm, val) => {
      // val could be undefined for unregistration
    //   if (matched.instances[name] !== vm) {
    //     matched.instances[name] = val
    //   }
    // }

    var current = matched.instances[name];
    if (
      (val && current !== vm) ||
      (!val && current === vm)
    ) {
      matched.instances[name] = val;
    }
  }