web-dev-qa-db-ja.com

Vuejs：路線変更イベント

私のメインページで私はリンクv-show=showをクリックすることによって@click = "show=!show"を示すドロップダウンを持っています、そして私がルートを変えるとき私はshow=falseを設定したいです。これを実現する方法を教えてください。

vue.jsvuejs2vue-router
61
kipris

このように、コンポーネントの$routeに ウォッチャー を設定します。

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

これはルートの変更を監視し、変更されたときはshowをfalseに設定します

141
Vamsi Krishna

あなたがv2.2.0を使っているならば、$ routesの変更を検出するために利用可能なもう一つのオプションがあります。

同じコンポーネント内のparamsの変更に反応するためには、単純に$ routeオブジェクトを見ることができます。

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

または、2.2で導入されたbeforeRouteUpdateガードを使用します。

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

参照： https://router.vuejs.org/en/essentials/dynamic-matching.html

23
Shubham Nigam

万が一誰かがTypeScriptでそれを実行する方法を探しているのであれば、これが解決策です。

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

上記の応答はより優れていますが、完全を期すために、コンポーネントに入っているときはVueRouter内のhistoryオブジェクトにthis：$ router.historyでアクセスできます。それは私たちが変化を聞くことができることを意味します。

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

これは、これと一緒に使用すると主に役立つと思います。$ router.currentRoute.path debuggerを配置することについて私が話していることを確認できます。

コードを編集して、Chrome DevToolsコンソールで遊び始めましょう。

1
Melardev

深いオプションを持つウォッチャーは私のために働きませんでした。

代わりに、コンポーネントのデータが変更されるたびに実行されるupdated（）ライフサイクルフックを使用します。 mounted（）と同じように使用してください。

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

参考までに、 ドキュメント をご覧ください。

0
Niño Angelo Orlanes Lapura