Mise à jour VueJs composant sur la route à modifier
Est-il un moyen de re-rendre un composant sur la route à modifier? Je suis l'aide de Vue Routeur 2.3.0, et je suis en utilisant le même composant dans de multiples voies. Il fonctionne très bien la première fois ou si je naviguer sur un itinéraire qui n'utilise pas le composant, puis aller pour une qui ne. Je suis de passage ce qui est différent dans les accessoires comme
{
name: 'MainMap',
path: '/',
props: {
dataFile: 'all_resv.csv',
mapFile: 'contig_us.geo.json',
mapType: 'us'
},
folder: true,
component: Map
},
{
name: 'Arizona',
path: '/arizona',
props: {
dataFile: 'az.csv',
mapFile: 'az.counties.json',
mapType: 'state'
},
folder: true,
component: Map
}
Alors que je suis en utilisant les accessoires pour charger une nouvelle carte et de nouvelles données, mais la carte reste la même que lors du premier chargement. Je ne suis pas sûr de ce qu'il se passe.
Le composant ressemble à ceci:
data() {
return {
loading: true,
load: ''
}
},
props: ['dataFile', 'mapFile', 'mapType'],
watch: {
load: function() {
this.mounted();
}
},
mounted() {
let _this = this;
let svg = d3.select(this.$el);
d3.queue()
.defer(d3.json, `static/data/maps/${this.mapFile}`)
.defer(d3.csv, `static/data/stations/${this.dataFile}`)
.await(function(error, map, stations) {
//Build Map here
});
}
- Afficher le composant?
- Aussi, ce routeur version?
- J'ai mis à jour la question avec le composant et vue routeur version. Merci
Vous devez vous connecter pour publier un commentaire.
La solution alternative à cette question gère cette situation dans plusieurs cas.
Tout d'abord, vous ne devriez pas vraiment appeler
mounted()
vous-même. Résumé les choses que vous faites dansmounted
dans une méthode que vous pouvez appeler à partir demounted
. Deuxièmement, Vue va essayer de le ré-utiliser des composants quand il le peut, de la sorte, votre principal problème est probable quemounted
n'est jamais tiré une seule fois. Au lieu de cela, vous pourriez essayer d'utiliser leupdated
oubeforeUpdate
cycle de vie événement.Voici un petit exemple, pas le dessin de la d3 trucs, mais en montrant comment
mounted
etupdated
sont déclenchés lorsque vous échangez des routes. Pop ouvrir la console, et vous verrezmounted
n'est jamais tiré une seule fois.updated()
sûrement les données renvoyées à partir de cette demande de changement (ou de mise à jour) de l'élément de données qui va déclencherupdated()
de nouveau et de provoquer une boucle infinie.Vous voudrez peut-être ajouter un :attribut de clé à
<router-view>
comme suit:De cette façon, Vue Routeur recharger le composant une fois le chemin des changements. Sans la clé, il ne remarquerez même pas que quelque chose a changé parce que le même composant est utilisé (dans votre cas, la Carte de la composante).
C'est vieux la réponse, dernière réponse est ci-dessous
Ma solution à ce problème était d'observer la
$route
propriété.Qui sera fini vous deux valeurs, c'est-à
to
etfrom
.Mise à JOUR --- 3 juillet 2019
Le principe est le même que ci-dessus, cependant s'avère que j'ai trouvé ce truc à la vue-la documentation du routeur, il est appelé En Composant Gardes. Par la description de celui-ci, il convient vraiment à vos besoins (et le mien en fait). Ainsi, les codes doivent être quelque chose comme ça.
Comme vous pouvez le voir, j'ai juste ajouter un
next()
fonction. Espérons que cela vous aide! Bonne chance!