NavigationDuplicated Navigating to current location (“/search”) is not allowed

by

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.

More Related Contents:

  1. Vue.js dynamic images not working
  2. How to add external JS scripts to VueJS Components?
  3. Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered
  4. Communication between sibling components in Vue.js 2.0
  5. VueJS: why is “this” undefined?
  6. Vuex state on page refresh
  7. Vuejs and Vue.set(), update array
  8. [Vue warn]: Property or method is not defined on the instance but referenced during render
  9. How to watch store values from vuex?
  10. How to call function on child component on parent events
  11. How to listen for ‘props’ changes
  12. Accessing Vuex state when defining Vue-Router routes
  13. Vuejs typescript this.$refs..value does not exist
  14. How to install jQuery into Nuxt.js?
  15. Vue.js: Conditional class style binding
  16. Is there any way to ‘watch’ for localstorage in Vuejs?
  17. how to fix ‘Access to XMLHttpRequest has been blocked by CORS policy’ Redirect is not allowed for a preflight request only one route
  18. VueJS/Typescript – Cannot find module ‘./components/Navigation’ or its corresponding type declarations
  19. Parentheses while calling a method in Vue
  20. Vue v-on:click does not work on component
  21. Methods vs Computed in Vue
  22. Passing props with programmatic navigation Vue.js
  23. How to set a component non-reactive data in Vue 2?
  24. How to use Vuetify tabs with vue-router
  25. Force download GET request using axios
  26. Importing javascript file for use within vue component
  27. When should I use Vuex?
  28. VueJS conditionally add an attribute for an element
  29. Vue.js – Add class to clicked button
  30. What’s the correct way to pass props as initial data in Vue.js 2?

Leave a Comment