Vue-Router Passing Data with Props

Question

I am having a hard time passing props using Vue-Router. I seem to not be able to access the props when I bring them into the next view. This is my methods object:

methods: {
    submitForm() {
      let self = this;
      axios({
        method: 'post',
        url: url_here,
        data:{
          email: this.email,
          password: this.password
        },
        headers: {
          'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'
        }
      }).then(function(response) {
        self.userInfo = response.data;
        self.$router.push({name: 'reading-comprehension', props: {GUID:self.userInfo.uniqueID }});
      })
   }
}

The post request is working, but when I try to route to a new component and pass in a props to access in the next component, it says,

Property or method "guid" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

By the way, the component that I am routing to looks like this:

<template lang="html">
  <div class="grid-container" id="read-comp">
    <div class="row">
      <h1>Make a sentence:</h1>
      {{ GUID }}
    </div>
  </div>
</template>

<script>
export default {
 data(){
   return {
     props: ['GUID'],
   }
 }
}

Solution

When you navigate to the new route programmatically, you should use params, not props.

self.$router.push({name: 'reading-comprehension', params: {guid:self.userInfo.uniqueID }});

Secondly, in your route definition, you should set the props property to true.

{name: "reading-comprehension", component: SomeComponent, props: true }

Finally, in your component, you define props separately from data and it should be all lower case.

export default {
 props: ["guid"],
 data(){
   return {
   }
 }
}

Comments

[lnamba]

Appreciate it! This worked. Thanks...I am super new to Vue.

[Ramesh_D]

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

[Brian Zelip]

This is a really great answer - concise and right to the point, and providing clear solution code.

[Ayyash]

does the value have to be scalar? can I pass an object?

[Bert]

@Ayyash You can pass an object.