title: Vue-Router Passing Data with Props
body: <p>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: </p>
  
  <pre><code>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 }});
        })
     }
  }
  </code></pre>
  
  <p>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,</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>By the way, the component that I am routing to looks like this:</p>
  
  <pre><code>&lt;template lang="html"&gt;
    &lt;div class="grid-container" id="read-comp"&gt;
      &lt;div class="row"&gt;
        &lt;h1&gt;Make a sentence:&lt;/h1&gt;
        {{ GUID }}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
   data(){
     return {
       props: ['GUID'],
     }
   }
  }
  </code></pre>