開発環境
- 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つ
- ルーティングのエラー処理を記述
- $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('/', () => {})
