web-dev-qa-db-ja.com

ルートオブジェクトをvue js

vue js？でルートオブジェクトを監視する方法。これは私のコードです

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

機能しません。

私は here

Main.jsのルートオブジェクトを見ることができるコードsanboxを見てください。

他のコンポーネント内のルートオブジェクトを監視しないでください。ルーターリンクが変更されるとコンポーネントが破壊されるためです。ディレクトリ構造に応じて、main.jsファイルで実行する必要があります

@santanuと@ittusに感謝

vue.jswatch
6
Komang Suryadana

deepオプションを試しましたか？

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

私のコードでは、次のようにしました-

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

他のコンポーネント内の$ routeオブジェクトを監視しないでください。ルーターのリンクが変更されると、コンポーネントが破壊され、新しいコンポーネントがマウントされるためです。そのため、コンポーネントのウォッチャーは破壊されます。ルート内の$ routeオブジェクトに注意してくださいVue次のようにrouterオブジェクトを挿入するインスタンス-

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

ルーターリンクを使用してルートを動的に変更することで、反応性に問題がありました。

問題は、ルートが変更されることですが、data（）によって返されたメソッドから取得したsiteDataはそうではないということでした：

私はそのようにルートを見なければなりませんでした：

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

これがこの問題で他の人を助けることを願っています

0
Sweet Chilly Philly

簡単な使用：

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