Vue-Router Weitergabe von Daten mit Requisiten

Question

Es fällt mir schwer, Requisiten mit dem Vue-Router zu senden. Ich kann nicht auf die Requisiten zugreifen, wenn ich sie in die nächste Ansicht bringe. Das ist meine Methoden Objekt:

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 }}); 
     }) 
    } 
} 

Die Post-Anforderung funktioniert, aber wenn ich auf dem Weg zu einer neuen Komponente versuchen und in Requisiten, um Zugang in der nächsten Komponente zu übergeben, heißt es,

Die Eigenschaft oder Methode "guid" ist nicht für die Instanz definiert, sondern wird während des Renderns auf verwiesen. Stellen Sie sicher, dass in der Datenoption reaktive Daten Eigenschaften deklariert sind.

By the way, die Komponente, die ich wie folgt aussieht bin Routing:

<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

Wenn Sie auf der neuen Route navigieren programmatisch use params, not props, Sie sollten.

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

Zweitens in der Routendefinition, sollten Sie the props property auf true gesetzt.

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

schließlich in Ihrer Komponente definieren Sie props getrennt von data und es sollte alles in Kleinbuchstaben sein.

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