[Vue3] router.pushでの遷移先が現在のリンクと同一の場合エラーが出る
例えば、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分処理が軽いくらいしかメリットが思い浮かばない。