例えば、top画面でtopにrouter.pushする ```ts this.$router.push({ name: "top" }); ``` と、NavigationDuplicatedエラーになる。 原因はrouter.pushがVue3からオーバーロードされて引数1つのメソッドが追加され、voidではなくPromise<Route>が返却されるようになったためらしい。 このPromise<Route>型のメソッドが遷移先が同一ページの場合にエラーを返すようだ。 対策としては、 ```ts // 引数に関数を2つ追加して従来のvoidメソッドを使う this.$router.push({ name: "top" }, () => {}, () => {}); // もしくはエラーをcatchしてあげる this.$router.push({ name: "top" }).catch(err => {}); ``` 個人的には後者の方がスマートだと思うけど、じゃあ前者の存在意義って一体・・・? Promise分処理が軽いくらいしかメリットが思い浮かばない。 - [参考1: 【Vue.js】Vue.jsの3系バージョンアップでVueRouter.push()の定義が変わっていた](https://it-blue-collar-dairy.com/vuerouter-push_error_for_versionup/) - [参考2: Throw Error "NavigationDuplicated" #2872](https://github.com/vuejs/vue-router/issues/2872)
2020/02/03 12:20:43

コメント (0)

あなたもコメントしてみませんか

アカウント新規作成(無料)

既にアカウントを持っている方は ログイン