[Vue3] router.pushでの遷移先が現在のリンクと同一の場合エラーが出る

mayatasomayataso

例えば、top画面でtopにrouter.pushする

this.$router.push({ name: "top" });

と、NavigationDuplicatedエラーになる。

原因はrouter.pushがVue3からオーバーロードされて引数1つのメソッドが追加され、voidではなくPromiseが返却されるようになったためらしい。
このPromise型のメソッドが遷移先が同一ページの場合にエラーを返すようだ。

対策としては、

// 引数に関数を2つ追加して従来のvoidメソッドを使う
this.$router.push({ name: "top" }, () => {}, () => {});
// もしくはエラーをcatchしてあげる
this.$router.push({ name: "top" }).catch(err => {});

個人的には後者の方がスマートだと思うけど、じゃあ前者の存在意義って一体・・・？

Promise分処理が軽いくらいしかメリットが思い浮かばない。