web-dev-qa-db-fra.com

Regarder l'objet route sur vue js

Comment regarder un objet route sur vue js?. Ceci est mon code

watch: { 
     '$route.params.search': function(search) {
           console.log(search)
      }
}

Ça ne marche pas.

J'essaie d'utiliser avec Deep ne fonctionne toujours pas ici

Regardez le code sanbox, vous pouvez regarder l'objet route sur main.js.

Vous ne devez pas surveiller l'objet route à l'intérieur d'autres composants. Parce que les composants sont détruits lorsque la liaison du routeur change. Vous devez le faire dans le fichier main.js, selon la structure de votre répertoire

Merci @santanu et @ittus

vue.jswatch
6
Komang Suryadana

Avez-vous essayé l'option deep?

watch: { 
     '$route.params.search': {
        handler: function(search) {
           console.log(search)
        },
        deep: true,
        immediate: true
      }
}
13
ittus

Dans mon code, j'ai aimé ce qui suit -

watch:{
    '$route' (to, from){
        // Put your logic here...
    }
},

Ne surveillez pas l'objet $ route à l'intérieur d'autres composants. Parce que lorsque la liaison du routeur change, le composant est détruit et un nouveau composant est monté. Les observateurs du composant sont donc détruits. Surveillez l'objet $ route à l'intérieur de l'instance racine Vue où vous injectez l'objet router. Comme suit -

const app = new Vue({
    router,
    watch:{
        '$route' (to, from){
           // Code
        }
    }
}).$mount('#element');
8
santanu bera

J'avais des problèmes de réactivité, en changeant dynamiquement de route avec un routeur-lien.

Le problème était que l'itinéraire changerait, mais mes données de site récupérées à partir d'une méthode renvoyée par data () n'étaient pas:

J'ai dû regarder l'itinéraire comme ceci:

    watch: {
      '$route' (to, from) {
        if(to !== from ) {
          this.siteData = this.getSiteData();
        }
      }
    },

J'espère que cela aide les autres avec ce problème

0
Sweet Chilly Philly

Utilisation simple:

watch: {
    "$route.params.search"(value) {
      //Your code here
    }
  }
0
Nuno Ribeiro