【导航故障】当前路由 push 跳转当前路由，VueRouter 会报错

在实际用户使用的情况里，有当前路由 push 跳转当前路由的情况（闲着没事，重复点击）。

但这时候 VueRouter 会认为这是不对的！因为是冗余的！（有点直男）

啪！报错！

解决

基于用户至上，还是要解决这个问题

1
2
3
4
5
6
// 解决“重复点击路由”/“当前路由跳当前路由”而报错的问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
// 在 new VueRouter 之前加

上述方法是一次性捕获并抛出了所有的错误。

但是为了防止一些未知的错误未能被发现，当前还是仅仅处理 push 方法上的“重复导航”的错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const originalPush = VueRouter.prototype.push
// 指定新的 push 方法
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  // 如果指定了成功或者失败的回调
  if (onResolve || onReject) {
    // 直接调用原本的 push 方法
    // - 不能直接调用，因为打包成为严格模式下 this 不是 router 而是 undefined
    return originalPush.call(this, location, onResolve, onReject)
  }
  // 没有指定成功或者失败的回调，要用 catch 处理
  return originalPush.call(this, location).catch(err => {
    // 如果是重复导航产生的错误，不再向外传递错误
    if (VueRouter.isNavigationFailure(err)) {
      // 当此处的 isNavigationFailure 只有一个参数时，那么就只会检查这个错误是不是一个导航故障
      // 产生的是成功的 Promise，成功的 Promise 的 value 是 err
      // 产生失败的 Promise：抛出错误或者 return 一个失败的 Promise
      return err
    }
    // 如果不是重复导航的错误，将错误向下传递
    return Promise.reject(err)
  })
}

参考