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

Tweet

Category JavaScript / Tagged vue 2019/12/24

問題

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を戻すようになっている。

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

１．コールバックを指定する

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

２．rejectされたPromiseをcatchする

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

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