え、まだエラー処理を一括管理していないの？

まずは謝ります。

タイトルで煽ってしまい申し訳ありません。

ところで皆さん、まずは下記のエラーメッセージをご覧ください！

NavigationDuplicated: Avoided redundant navigation to current location

vue-routerを使っている方は、一度は遭遇しているであろうこのエラー。

意味は、「同じページに遷移できないよ！」と言う意味です。

まずは、このエラーの回避策をお教えします。

this.$router.push('/').catch(() => {})

たったcatch(() => {})を付けるだけでエラーが出なくなります！

これでエラーを解決した気にならずにもうちょっと我慢して見て下さい。

では、大規模な開発になった場合、いちいちcatch(() => {})を付けるとなると面倒ですよね？？？

そこで、出てくるのがerrorHandlerというモジュールです！

これは、Vue特有のエラーを検知してくれる優れものです。

これは、同じようなエラーメッセージが何度も出てる場合に有効です。

使い方としては、エラーメッセージごとに処理を分けて使うといった感じです。

それでは使い方を見てみましょう！

main.jsにて以下のように関数の宣言を行います。

main.js

Vue.config.errorHandler = function (error) {
  //処理
}

※注意 アロー関数にするとエラーが起きます！！！

次に、今回のエラーを例に処理を書いていきます。

main.js

Vue.config.errorHandler = function (error) {
  if (error.name === 'NavigationDuplicated') {
    // routerで遷移する時、同じページに遷移しようとすると起こるエラーを回避
    return
  }
}

このようにして、エラーメッセージを表示させることなく処理を終えることができます！

これはめちゃくちゃ使えるのでぜひ皆さんも使ってみてください！！！

以上、「え、まだエラー処理を一括管理していないの？」でした！

良かったら、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading