Vuejs: événement sur le changement de route

Question

Dans ma page principale, des menus déroulants indiquent v-show=show en cliquant sur le lien @click = "show=!show" et je souhaite définir show=false lorsque je change de route. Conseillez-moi s'il vous plaît comment réaliser cette chose.

Answer 1

Configurez un observateur sur le $route dans votre composant comme ceci:

 watch:{
    $route (to, from){
        this.show = false;
    }
} 
 

Ceci observe les changements de route et, lorsqu’il est modifié, définit show sur false

Answer 2

Si vous utilisez la version 2.2.0, une autre option est disponible pour détecter les modifications dans $ routes.

Pour réagir aux changements de paramètres dans le même composant, vous pouvez simplement regarder l'objet $ route:

 const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}
 

Ou bien, utilisez la protection beforeRouteUpdate introduite dans la version 2.2:

 const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}
 

Référence: https://router.vuejs.org/fr/essentials/dynamic-matching.html

Answer 3

En cas de doute, si quelqu'un cherche comment le faire en caractères dactylographiés, voici la solution

    @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: any) {
      // Some action
    }
 

Et oui comme mentionné par @Coops ci-dessous, s'il vous plaît ne pas oublier d'inclure

 import { Prop, Watch } from "vue-property-decorator";
 

Answer 4

Watcher avec l'option deep n'a pas fonctionné pour moi.

Au lieu de cela, j'utilise updated () lifecycle hook qui est exécuté chaque fois que les données du composant sont modifiées. Utilisez-le simplement comme vous le faites avec monté () .

 mounted() {
   /* to be executed when mounted */
},
updated() {
   console.log(this.$route)
}
 

Pour votre référence, visitez la documentation .

Answer 5

Les réponses ci-dessus sont préférables, mais pour compléter, si vous êtes dans un composant, vous pouvez accéder à l'objet d'historique à l'intérieur du VueRouter avec: this. $ Router.history. Cela signifie que nous pouvons écouter les changements avec:

this.$router.listen((newLocation) =>{console.log(newLocation);})

Je pense que cela est surtout utile quand on l'utilise avec cela. $ Router.currentRoute.path Vous pouvez vérifier de quoi je parle en plaçant un debugger

votre code et commencez à jouer avec la console Chrome DevTools.