Vue Router. Bind Daten

Question

Ich entwickle Vue App und jetzt bin ich auf Schritt, wenn ich vue Router verwenden sollte. Aber ich habe ein kleines Problem mit der Datenbindung in Router-Vorlage.

Bitte helfen Sie mir.

HTML:

<div id="app"> 
    <h1>Hello App!</h1> 
    <p> 
    <router-link to="/foo">Go to Foo</router-link> 
    <router-link to="/bar">Go to Bar</router-link> 
    </p> 
    <router-view></router-view> 
</div> 

Script:

const Foo = { template: '<div>{{foo}}</div>' } 
const Bar = { template: '<div>bar</div>' } 


const routes = [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
] 

const router = new VueRouter({ 
    routes 
}) 


const app = new Vue({ 
el: '#app', 
    router, 
    data: function(){ 
    return {foo: "asdasdas"} 
    } 
}) 

{{foo}} binden funktioniert nicht.

anschauliches Beispiel: https://jsfiddle.net/xgrjzsup/4430/

Answer 1

in Ihrem Fall gibt es zwei Möglichkeiten, wie Sie, dass "foo" var zugreifen können.

{{$parent.foo}} 
{{$root.foo}} 

Aber betrachten Vuex mit in Ihre Anwendung zu teilen Daten - https://github.com/vuejs/vuex Oder dass foo als Parameter an der Strecke passieren - https://router.vuejs.org/en/essentials/passing-props.html

Answer 2

Ofc es nicht funktioniert. Sie müssen die Daten für die von Ihnen verwendete Vorlage festlegen.

in Ihrem Fall:

const Foo = { 
    template: '<div>{{foo}}</div>', 
    data() { 
    return { 
     foo: 'magic' 
    } 
    } 
} 

Beifall und glücklich Codierung.

Answer 3

Vom guide on components:

Jede Komponenteninstanz hat einen eigenen isolierten Umfang. Das bedeutet, dass Sie nicht direkt auf übergeordnete Daten in einer untergeordneten Komponente Vorlage verweisen können (und sollten). Daten können unter Verwendung von Requisiten an untergeordnete Komponenten weitergegeben werden.

und Foo ist eine untergeordnete Komponente Ihrer App über den Router festgelegt.

Eine Möglichkeit, Daten von Eltern zu Kind zu übergeben, ist die Verwendung von Requisiten.

Ändern Sie bitte Ihre Foo Definition eine foo Eigenschaft zu akzeptieren:

const Foo = { 
    props: ['foo'], 
    template: '<div>{{foo}}</div>' 
} 

und binden das übergeordnete Objekt in der Vorlage

<router-view :foo="foo"></router-view> 

Ein aktualisierter Fiddle: https://jsfiddle.net/xgrjzsup/4431/