vue élément js ne rerender sur la même page

Question

J'ai un composant

<template>somecode</template> 
<script> 
export default { 
     name: 'Card', 
     created() { 
       axios.get(apiObjUrl) 
         somecode 
       }) 
    } 
</script> 

ce mon url: http://127.0.0.1:8080/#/card/12

Mais j'ai un problème:

quand j'utilise router- lien comme ceci:

<router-link to="/card/155"> card 155</router-link> 

mes changements d'URL: http://127.0.0.1:8080/#/card/155

mais la méthode created() n'est pas déclenchée. donc je ne fais pas de nouvelle demande xhr à l'API et les données ne changent pas que dois-je faire?

Answer 1

C'est juste parce que votre composant est déjà créé. Vous pouvez essayer d'utiliser le crochet de cycle de vie updated() au lieu de created().

export default { 
    name: 'Card', 
    updated() { 
    axios.get(apiObjUrl) 
    somecode 
    }) 
} 

Note: Cela ne fonctionnera que si vos modifications DOM. Si vous voulez juste écouter sur les changements d'URL et mettre à jour en conséquence, vous feriez mieux de votre route comme ceci.

export default { 
    name: 'Card', 
    created() { 
    axios.get(apiObjUrl) 
    somecode 
    }), 
    watch: { 
    '$route': function() { 
     // do your stuff here 
    } 
    } 
} 

Answer 2

Comme alternative, vous pouvez configurer un attribut key sur votre <router-view> comme ceci:

<router-view :key="$route.fullPath"></router-view> 

Comme <router-view> est un composant lui-même et des clés uniques remplacement de la force du composant au lieu de le réutiliser. Vous pouvez donc utiliser des crochets de cycle de vie.

Voir la fiddle