vue-router報錯Uncaught (in promise)及解決方法

1、報錯原因

在升級了Vue-Router版本到到3.1.0及以上之后，頁面在跳轉路由控制台會報Uncaught (in promise)的問題。

這是什么原因呢？

看vue-router的版本更新日志

V3.1.0版本里面新增功能：push和replace方法會返回一個promise, 你可能在控制台看到未捕獲的異常。

 2、解決方法

方法一：在調用方法的時候用catch捕獲異常

this.$router.replace('/home').catch(err => {
   console.log(err)
})

方法二：對Router原型鏈上的push、replace方法進行重寫，這樣就不用每次調用方法都要加上catch

在router.js加入以下內容：

import Router from 'vue-router'
  
const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}