Vue-Routerが小道具を使用してデータを渡す

Question

Vue-Routerを使用して小道具を渡すのが苦労しています。私はそれらを次のビューに持っていくとき、小道具にアクセスすることができないようです。これは私のメソッドがオブジェクトである：

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

ポスト要求が動作しているが、私は新しいコンポーネントへのルートにしようとすると、次のコンポーネントにアクセスするための小道具を渡したときに、それが言う、

プロパティまたはメソッド "guid"はインスタンスでは定義されていませんが、レンダリング中に参照されるのは です。データオプションに無効なデータ プロパティを宣言してください。ところで

、私はこのようなルックスにルーティングしていますコンポーネント：

<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

あなたがプログラムで新しいルートに移動すると、あなたがすべきuse params, not props。

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

第2に、ルート定義では、the props propertyをtrueに設定する必要があります。

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

最後に、あなたのコンポーネントでは、あなたはdata別にpropsを定義し、それがすべて小文字でなければなりません。

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