Vue.js, pass data to component on another route
If you want to save it globally, you could use an event bus or a VueX store to contain it, then save and load it from this event bus or store when you need to access it.
If you want to pass it between those two components only, and only when accessing the second page from the first one, you can pass properties to the route argument as per this guide: https://router.vuejs.org/en/essentials/passing-props.html
As Antony said, since you've already enabled props in router/index.js
, you can pass parameters in router.push
like this:
router.push({
name: 'events',
params: {
items: data
}
});
then you will be able to receive items
as props in EventsDisplay.vue
export default {
name: 'eventsDisplay',
props: ['items'],
};
Try using Vuex
In Source Component
this.$store.commit('changeDataState', this.$data);
this.$router.push({name: 'user-post-create'});
In Destination Component
created () {
console.log('state', this.$store);
this.$store.getters.Data;
}