1. ホーム
  2. vue

Vue-Routerのアップグレードによる捕捉されない(promiseにおける)問題

2022-02-18 05:06:18

Vue-Router を 3.1.0 以降にアップグレードすると、Jump Routing コンソールで Uncaught (in promise) 問題がページで報告されます。

その理由は何でしょうか?

vue-routerのバージョンを見てみる ログの更新

V3.1.0の新機能:pushとreplaceメソッドはプロミスを返すので、コンソールにキャッチできない例外が表示されることがあります。

解決策1: メソッド呼び出し時にcatchで例外をキャッチする

this.$router.replace({ name: 'foo' }).catch(err => {
   console.log('all good')
})    

方法2:Routerのプロトタイプチェーンにあるpushとreplaceのメソッドをオーバーライドし、メソッドが呼ばれるたびにキャッチする必要がないようにします。このメソッドは、vue-routerの 課題 のお偉いさんが解決してくれました。

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)
}