Vue-router passing data via props doesn't work.. i think

vue-router

#1
<v-card 
  width="100" 
  max-with="300" 
  flat
  :to="'/art/'+item.title">
  <v-img
  :src="item.webImage.url"
  :lazy-src="item.webImage.url"
  >
    <v-layout
      slot="placeholder"
      fill-height
      align-center
      justify-center
      ma-0
    >
      <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
    </v-layout>
  </v-img>
  <v-card-text >
    <div class="text-truncate">{{ item.title }}</div>
  </v-card-text>
</v-card>

script:

export default {
	props: ['item', 'i'],
....
}

it should go to from this card to ‘single.vue’ and it goes but props doesn’t :d
routes:

{
    path: '/art/:id',
    name: 'art',
    props: true,
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: loadView('Single')
  }

in my ‘single.vue’:

export default {
	props: ['item']
}

this is ok but in vue instance says ‘item’ is undefined. i don’t know why it’s not working
what should i do or am i doing something wrong ?


#2

Well. It looks like you’ve set your prop to item, but in the route you’re using id. Because you use props: true your route params are set at the component props. So your problem is you are using the wrong prop name. Your prop in your component should be named id.

Boolean mode
When props is set to true , the route.params will be set as the component props.

https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode


#3

it solved my problem and helped to understand the problem. Thanks a lot
so if i want to pass all item object to ‘single.vue’ in this case what should i do


#4

That depends on what the item object is. You shouldn’t really be using the router to pass large objects, just primitives. To share larger data structures, you should look to state management