Pass an object as param to router.push ([email protected])

by

Passing objects to params was never supported in Vue-router

It sort of worked in Router v3 with $router.push – the target component received the object. BUT as soon as user started using browser navigation (Back button) OR copy/pasting URL’s, this solution was broken (you can try it here – just click the button and then use back and forward controls of the frame)

As a rule of thumb – if you want to pass anything to the target route/component, such data must be defined as parameters in the route definition so it can be included directly in the URL. Alternatives are passing data in a store, query params (objects needs to be serialized with JSON.stringify), or using the history state.

This was true for Vue-router v3 and is still for Vue-router v4

Note

Just to explain alternatives. By “store” I do not mean just Vuex. I understand Vuex can be overkill for some small applications. I personally prefer Pinia over existing Vuex. And you can create global state solution yourself with composition API very easily…

More Related Contents:

  1. Vue Router return 404 when revisit to the url
  2. vue-router — Uncaught (in promise) Error: Redirected from “/login” to “/” via a navigation guard
  3. Vue.js – How to remove hashbang #! from url?
  4. Vue 3 Vite – dynamic image src
  5. Vue 3: Is getCurrentInstance() deprecated?
  6. How to make dynamic routes on the vue router?
  7. Can we make vue.js application without .vue extension component and webpack?
  8. Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function
  9. Passing props to Vue.js components instantiated by Vue-router
  10. How to use microfrontends with Vue/Nuxt?
  11. Vuejs: Event on route change
  12. How to implement debounce in Vue2?
  13. How to pass a value from Vue data to href?
  14. Vuex – Do not mutate vuex store state outside mutation handlers
  15. Axios can’t set data
  16. Vue: shared data between different pages
  17. Which command do I use to generate the build of a Vue app?
  18. VueJS access child component’s data from parent
  19. Nuxt.js vuex store not persisted
  20. Vue-router redirect on page not found (404)
  21. How can I get query parameters from a URL in Vue.js?
  22. Vue – how to pass down slots inside wrapper component?
  23. Mocking methods on a Vue instance during TDD
  24. Vue: wait to render until all components are mounted
  25. Is it possible to emit from mounted in Vuejs?
  26. Passing event and argument to v-on in Vue.js
  27. How to setup SASS/SCSS/sass-loader in Nuxt
  28. Vue.js – update router view
  29. Detect Back Button in Navigation Guards of Vue-Router
  30. How to pass an object as props with vue router?

Leave a Comment