Vue.js, pass data to component on a different route
The simple task of passing data from one page to another created a real headache for newbies to Vue.js Here is my router
I submit a form on the "/" page that makes an API request,
and I just want to pass data to another route page with another component
Is it really that hard to do in Vue? It caused a real headache today. Receive data from API, save and send to other components. How can i do this?
source to share
As Antony said, since you already included props in router/index.js
, you can pass parameters in router.push
like this:
router.push({
name: 'events',
params: {
items: data
}
});
then you can get items
as a props inEventsDisplay.vue
export default {
name: 'eventsDisplay',
props: ['items'],
};
source to share
If you want to store it globally, you can use an event bus or VueX store to store it, and then save and load it from that event bus, or save when you need to access it.
If you only want to pass it between these two components, and only when accessing the second page from the first, you can pass properties to the route argument according to this tutorial: https://router.vuejs.org/en/essentials/passing-props .html
source to share