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

Answer 1

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