解決Vue中重複點擊相同路由控制檯報錯問題

vue-router 升級到3.1.x 後，重複點擊導航時，控制檯出現報錯 ，雖然不影響功能使用，但也不能視而不見。

報錯信息

報錯原因

vue router ≥ v3.1 後 ，回調形式改成promise api了，返回的是promise，如果沒有捕獲到錯誤，控制檯始終會出現如上圖的警告。

解決方法

【方法一】降低版本

npm i [email protected] -S

【方法二】在router文件夾下增加下列代碼

const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

【方法三】捕獲異常

// 捕獲router.push異常
this.$router.push(route).catch(err => {
    console.log('輸出報錯',err)
})

【方法四】補齊router第三個參數

// 補齊router.push()的第三個參數
this.$router.push(route, () => {}, (e) => {
    console.log('輸出報錯',e) 
})