Vue.js, pass data to component on another route

Question

Simple task to pass data from one page to another made a real headache to newbie in Vue.js Here is my router

I'm rendering a form on "/" page, which make an API request,

and I just want to pass data to another route page with another component

Is it so hard to do in Vue? It made a real headache for me today. Get data from API, save & send to another component. How can I do it?

what data do you want to pass? activities?

choasia
– choasia

2017-08-03 13:10:30 +00:00
Commented Aug 3, 2017 at 13:10 — choasia
– choasia, Commented Aug 3, 2017 at 13:10

choasia · Accepted Answer · 2017-08-03 13:19:59Z

16

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'],
};

answered Aug 3, 2017 at 13:19

choasia

10.9k6 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

choasia Over a year ago

@EzhiMakov this.items should work. Since it's not related to this question, you can just open another question and paste your code there.

Evgeny Malkov Over a year ago

thanks a lot, man, sorry for previous comment, it was my stupdity with refreshing /events page without passing data

Ramesh_D Over a year ago

thanks it did worked.. wasted so much time.. finally got

Istiaque Ahmed Over a year ago

@choasia, May i ask you to have a look at a Vue.JS question related with the source code in github of the book 'Full-Stack Vue.js 2 and Laravel 5' by Anthone Gore here : stackoverflow.com/questions/59245577/… ? Particularly take a look at the EDIT: section of the OP

juacompe Over a year ago

In my case (@vue/cli-service version 3.12.1), I cannot get the params through props but I get it from this.$route.params.items

|

Antony · Accepted Answer · 2017-08-03 13:02:32Z

2

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

answered Aug 3, 2017 at 13:02

Antony

1,27311 silver badges19 bronze badges

Comments

user7153178 · Accepted Answer · 2019-02-24 19:35:23Z

1

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;
}

answered Feb 24, 2019 at 19:35

user7153178

Comments

Shamaz saeed · Accepted Answer · 2022-02-02 09:34:00Z

0

Add props true in your vue router


{
    path: "/pay-now",
    name: "pay",
    props: true,
    component: () =>
      import(/* webpackChunkName: "about" */ "../components/account/pay.vue"),
    beforeEnter: AuthGuard,
  },

After that pass props with router like that

        this.$router.push({ 
        name: "pay",
        params: {
        result:this.result,
      }
      });

answered Feb 2, 2022 at 9:34

Shamaz saeed

4464 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vue.js, pass data to component on another route

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related