SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

vue-routerでUncaught(in promise) NavigationDuplicated のエラー

問題

vue-routerで画面遷移しようとしたら、エラーが出ます。

router.push('/hoge')
router.push('/hoge')
Uncaught (in promise)
e {_name: "NavigationDuplicated", name: "NavigationDuplicated", message: "Navigating to current location ("/hoge") is not allowed", stack: "Error ...(略)

答え

現在すでに /hoge にいる状態で、 /hoge に移動しようとするとエラーになる。

router.push、router.replace は、ナビゲーションの成功時と失敗時のコールバックを引数で指定することができ、3.1以降は、コールバックが省略されると、Promiseを戻すようになっている。

以下のいずれかでエラーに対応できる。

1.コールバックを指定する

router.push('/hoge', () => {})

2.rejectされたPromiseをcatchする

router.push('/hoge').catch(err => {})
router.push('/hoge').catch(function(err){})

関連するメモ

コメント