Vue.js passing array from one page to another

Question

I'm using vue.js and I have one component, where the user selects what they want and then they hit "order". At this moment I use <router-link to="/order"> to show new page. But I don't know how to access the array from the previous component there. I tried something like this :selected-chairs="selectedChairs" and in the other component this props: ['selectedChairs'], but it doesn't work. My routes file (index.js):

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Select',
      component: Select,
      props: true
    },
    {
      path: '/order',
      name: 'Order',
      component: Order,
      props: true
    }
  ]
})

Possible duplicate of [Vue: shared data between different pages](https://stackoverflow.com/questions/40953496/vue-shared-data-between-different-pages) — moon cheese, Nov 11 '17 at 16:38
Show the code for the part where you do `:selected-chairs="selectedChairs"` as this is the right way to go and it should be working — webnoob, Nov 11 '17 at 18:32

score 1 · Accepted Answer · answered Nov 11 '17 at 22:08

It's possible to do what you want to do but I don't think it's a good idea. First, in line with your original question, this is what you could do:

Set up your order route:

export default new Router({
    routes: [{
      path: '/order/:selected-chairs',
      name: 'Order',
      component: Order,
      props: true
    }]
}

You could then have a link like so:

<router-link :to="'/order/' + JSON.stringify(mySelectedChairs) + '">Link Text</router-link>

or you could do

<router-link :to="{path: 'order', query: { selected-chairs: mySelectedChairs }}">Link Text</router-link>

This would allow you to access that data on your component using:

this.$route.params.selected-chairs

or

this.selectedChairs // because props: true binds to the props

This page has more information on passing params using router-link: https://router.vuejs.org/en/api/router-link.html

As I said, I don't think this is a good idea. Even if you're not using Vuex, you're much better off doing this using some sort of stateful component. You could then set the selected-chairs in your state and the order component would just know about them being selected. This allows you to do things like having a mini basket that reacts to users entering stuff into their baskets etc.

Setting up a simple Vuex system isn't complicated and there are various articles on the web to help that would be my recommended approach.

Thank you very much! Helped a lot. I used vuex and it's working just as I need it to :). — xtrontross, Nov 12 '17 at 14:55

score 0 · Answer 2 · edited Jan 30 '20 at 20:03

0

The above answer is correct but will show a blank page on page load.

To solve that, DO:

export default new Router({
    routes: [{
      path: '/order/:selected-chairs?',
      name: 'Order',
      component: Order,
      props: true
    }]
}

As you can see, I added a question mark (?) to the front of the path parameter

edited Jan 30 '20 at 20:03

N'Bayramberdiyev

5,936
7
27
47

answered Jan 30 '20 at 19:57

GeekyADAMS

121
1
4

Vue.js passing array from one page to another

2 Answers2