Requisiten, um verschachtelte Route Passing

ich die folgenden Routen in meiner VueJS App haben:Requisiten, um verschachtelte Route Passing

const routes = [ 
    { 
    path: '/', 
    component: PlacesList 
    }, 
    { 
    name: 'place', 
    path: '/places/:name', 
    component: CurrentWeather, 
    children: [ 
     { 
     name: 'alerts', 
     path: 'alerts', 
     component: ForecastAlerts 
     }, 
     { 
     name: 'forecast', 
     path: 'forecast', 
     component: ForecastTimeline 
     } 
    ] 
    } 
];

ForecastTimeline erhält Requisiten aus CurrentWeather geben:

export default { 
    name: 'ForecastTimeline', 
    props: ['forecastData'], 
    components: { 
    ForecastDay 
    } 
}

Als ich /places/:name/forecast von /places/:name alles gut funktioniert navigieren. Wenn ich jedoch versuche, /places/:name/forecast direkt zu erreichen, erhalte ich einen Cannot read property 'summary' of undefined Fehler. Dies tritt auf, weil forecastData asynchron innerhalb der Komponente CurrentWeather abgerufen wird. Wie können asynchrone Eigenschaften, die an eine verschachtelte Route übergeben werden, ordnungsgemäß verarbeitet werden?

Quelle

2017-05-15 MattDionis

Haben Sie versucht, die prop Definition zu einem mixin zu verschieben? Auf diese Weise können Sie es als Teil von 'ForcastAlerts' und' ForcastTimeline' aus derselben Quelle verwenden. Eine andere Option, die ich mir vorstellen kann, ist die Verwendung eines Vuex-Speichers, um die Daten für verschiedene Komponenten zugänglich zu machen. –

Ich habe noch kein Mixin probiert. Vuex ist etwas, das ich in Zukunft hinzufügen möchte, aber ich wollte herausfinden, wie ich das auch ohne es schaffen könnte. – MattDionis

Beste andere Weise, die ich denken kann, wäre die ForcastTimeline Komponente haben, ein Event auf einer Pumpe globalen Nachricht definieren, so dass es unabhängig davon aufgerufen werden kann, was die Daten abruft –

Haben Sie die SubRoutes Komponenten nicht versucht, die Anzeige, während die Daten zu holen?

Etwas wie:

export default { 
    name: 'CurrentWeather', 
    data(){ 
    return { 
     loading: true 
    } 
    }, 
    created(){ 
    this.fetchForecastData().then(() => { 
     this.loading = false; 
    }); 
    }, 
    methods: { 
    fetchForecastData() { 
     return fetch('http://..'); 
    } 
    } 
}

In DasaktuelleWetter Vorlage:

<router-view v-if="!loading"></router-view>

Quelle

2017-06-30 15:32:04 mchasles

Requisiten, um verschachtelte Route Passing

Antwort

Verwandte Themen