Wie kann ich Eigenschaften an eine Komponente übergeben, die von Router in Vue Js

Question

Ich bin neu zu VueJs und ich habe ein Problem mit zwei Komponenten. Ich versuche, eine Komponente mit vuejs Router anzuzeigen, und ich muss Eigenschaften an diese Komponente übergeben, und da es kein untergeordnetes Element dieser Komponente ist (es ist in einem anderen Verzeichnis), wie kann ich Daten an diese Komponente übergeben? Zum Beispiel:

Dies ist eine übergeordnete Komponente:

<template> 
    <div class="container"> 
     <router-link to="/Form"></router-link> 
    </div> 
</template> 
<script> 
    export default{ 
    data(){ 
    return{ 
     values: {val1: 123, val2: 321} 
    } 
    } 
} 
</script> 

Dies ist ein Komponenten, die Eigenschaften, Form Komponente benötigt:

<template> 
    <div class="container"> 
     <form> 
     <input type="text" v-model="values.val1"/> 
     <input type="number" v-model="values.val2"/> 
     </form> 
    </div> 
</template> 
<script> 
    export default{ 
    props: { 
    values: { 
     type: Object 
    } 
    } 
} 
</script> 

Answer 1

Sie könnten die Werte übergeben als query Objekt:

<router-link :to="{ path: '/Form', query: values }"></router-link> 

Und lassen Sie die Form-Komponente überprüfen für die $route.query Werte anstelle der Verwendung props:

<template> 
    <div class="container"> 
    <form> 
     <input type="text" v-model="values.val1"/> 
     <input type="number" v-model="values.val2"/> 
    </form> 
    </div> 
</template> 
<script> 
export default { 
    data() { 
    return { 
     values: this.$route.query 
    } 
    }   
} 
</script> 

Beachten Sie, dass diese Werte auf die URL als Query-String hinzugefügt werden.

---

Sonst würde ich einen Blick auf this post werfen. Oder vielleicht in Vuex suchen.