This happened to me when I had a router-link
pointing to the same route. e.g. /products/1
.
The user is able to click on the products, but if a product was already clicked (and the component view was already loaded) and the user attempts to click it again, the error/warning shows in the console.
You can learn more on the github issue..
Posva, one of the main contributors of vue-router suggests:
router.push(‘your-path’).catch(err => {})
However, if you don’t want to have a catch
block which does nothing, in order to solve the issue you can compare the router navigation with the current route and only navigate if they differ:
const path = `/products/${id}`
if (this.$route.path !== path) this.$router.push(path)
Note: $route
is an object provided by vue-router to every component. See The Route Object for more info.