路由守卫使用时的报错问题

路由守卫使用时的报错问题

Uncaught (in promise)
NavigationDuplicated: Avoided redundant navigation to current location: "/about?page=7".

// 让路由守卫的错误不显示(用路由守卫记得加上这句，重写下抛出错误机制)
// navigationduplicate:避免到当前位置“/about?page=5”的冗余导航。
// 如果当前路由已经是/about，使用编程式导航再次跳转到/about路由，会被认为导航多余，报错，如上
// 解决方案如下：原理是捕获push函数报错，不抛出错误

解决方案：

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err=>err)
}

把上面这段代码放在你路由index.js的文件里
如图位置

也可以手动抛出错误，抛出后，控制台还会输出之前一模一样的错误，但不影响用户操作。
如下加个throw(err)

const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err=>{
    throw(err) // 抛出错误，控制台会显示错误信息，如果不抛出，控制台不会报错
    return err;
  })
}