How to fix NavigationDuplicated Vue Router error?
date
Oct 1, 2020
slug
vue-router-duplication
status
Published
tags
vue
vue-router
summary
Let us learn how to fix the famous vue router duplication error.
type
Post
Since version 3.3.0, Vue Router throws a couple of errors as a part of its promise API. "NavigationDuplicated" is one such error being thrown explicitly when the user clicks
<router-link> or ( router.push() / router.replace() called programmatically) to view a page component that is already in current view.Major router errors introduced includes,
- NavigationDuplicated
- NavigationCancelled
- NavigationRedirected
- NavigationAborted
Solution
To solve this error, we basically need to catch the error being thrown by the API methods. But adding catch statements to all the push and replace methods scattered across the codebase is really painful and time-consuming.
There are a couple of solutions to solve this issue, but the most optimized solution is to modify the router's methods with our own custom methods by adding that catch statement in one place as follows.
Note: Make sure to include this script at the root of the project along with other polyfills