CODEWITHSUNDEEP
javascriptvue.jsvue-router
BRose
BRose

Reputation: 247

How can I access props passed in Vue router, inside a Vue component?

I have a route defined below:

{
  path: 'fit-details',
  name: 'fit-details',
  component: Fitment,
  props: true

},

I'm passing props through my route with data from the state:

this.$router.push({ path: 'fit-details', query: { 
    year: this.query.year, 
    make: this.query.make,
    model: this.query.model
  }
})

I see the route getting properly defined when passed: www.placeholder.com?year=2008&make=Acura&model=MDX

And finally inside my receiving component I have the props instantiate:

export default {
  props: ['year', 'make', 'model'],
},

However I can't access this data in the component for some reason. Any help would be much appreciated, Im honestly not the best when it comes to Vue router stuff

Upvotes: 2

Views: 1237

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

No need to define that props inside the visited component, you could use this.$route.query.year and this.$route.query.make or you could do something like :

const {'year', 'make', 'model'}=this.$route.query

or :

{
  path: 'fit-details',
  name: 'fit-details',
  component: Fitment,
 props:(route) => ({ year: route.query.year,make:route.query.make,model:route.query.model })

},

in Fitment component :

export default {
  props: ['year', 'make', 'model'],
},

Upvotes: 2

Related Questions