web-dev-qa-db-fra.com

Vuejs: événement sur le changement de route

Sur ma page principale, j'ai des listes déroulantes qui montrent v-show=show en cliquant sur le lien @click = "show=!show" et je veux définir show=false lorsque je change de route. Conseillez-moi s'il vous plaît comment réaliser cette chose.

vue.jsvuejs2vue-router
72
kipris

Configurez un observateur sur le $route de 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

162
Vamsi Krishna

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 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/en/essentials/dynamic-matching.html

26
Shubham Nigam

Si vous souhaitez savoir comment procéder dans TypeScript, voici la solution

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

Et oui, comme mentionné par @Coops ci-dessous, n'oubliez pas d'inclure

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

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

Au lieu de cela, j'utilise un hook updated () () qui est exécuté à chaque fois que les données du composant changent. Il suffit de l’utiliser comme vous le faites avec monté () .

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

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

1
Niño Angelo Orlanes Lapura

Les réponses ci-dessus sont préférables, mais pour être complet, lorsque 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

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

1
Melardev