解决vue router 报错:Unhandled promise rejection

说明:最新在修改和配置动态路由,功能是初步实现了,但是前端页面经常报 Unhandled promise rejection undefined或者 Unhandled promise rejection NavigationDuplicated错,这个报错并无具体定位,因此也没法去直接解决。网上google了很久,找到了一个与之对应的方法
具体请移步vue router 报错: Uncaught (in promise) NavigationDuplicated
说白了就是在每次路由分发的时候,都去catch一下错误。
在main.js中添加

import Router from 'vue-router'
Vue.use(Router)
// 原型中添加catch捕获error
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

这个方法虽然是解决了报错问题,但是又出现一个新的问题了,l路由跳转失败了!!!
我赶紧在重复对比,最终找到原因了:
Unhandled promise rejection 这个报错多半是因为你router重复push了,
也就是你反复执行了

let path = '/'
this.router.push(path)
this.router.push(path)

亦或者你 this.router.push(this.path1) 的时候,紧接着又立马 this.router.push(this.path2) ,于是出现了路由双跳转出错了!

let path1 = '/'
let path2 = '/xxx'
this.router.push(path1)
this.router.push(path2)
Logo

前往低代码交流专区

更多推荐