【vue-router】NavigationDuplicated Avoided redundant navigation to current locationの対処法

開発環境

  • vue-cli 5.0.4

エラー内容

このエラーは、vue-routerでの遷移時、現在いるrouteと同じrouteに移動しようとすると発生する。

NavigationDuplicated: Avoided redundant navigation to current location: ***
at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2066:15)
at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2036:15)
at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2334:18)
at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2261:8)
at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2607:10)
at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3035:22)
at new Promise (<anonymous>)
at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3034:12)
at VueComponent.setCategoryId (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.
js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/pages/blog/
common/BlogAside.vue?vue&type=script&lang=js&:37:20)
at click (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?

解決法2つ

  1. ルーティングのエラー処理を記述
  2. $router.push()の第二引数に、routing失敗時のコールバックを指定

router.push、router.replace は、ナビゲーションの成功時と失敗時のコールバックを引数で指定できる。

1. ルーティングのエラー処理を記述

this.$router.push('/').catch(err => {
    console.log(err)
})

router.push と router.replace は Promise を返す。

ナビゲーションが成功した場合は’/’に遷移し、失敗した場合は.catch()の処理が実行される。

参考:ナビゲーションの失敗

2. $router.push()の第二引数に、コールバックを指定

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

参考:Throw Error “NavigationDuplicated” #2872

関連記事

コメント

この記事へのコメントはありません。