Vuejs：ルート変更時のイベント

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

次のようにコンポーネントのウォッチャーをセットアップ$routeします。

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

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

v2.2.0を使用している場合は、$ routesの変更を検出するためのオプションがもう1つあります。

同じコンポーネントでの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

誰かがtypescriptでそれを行う方法を探している場合に備えて、ここが解決策です

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

そして、以下の@Coopsで言及されているように、含めることを忘れないでください

import { Watch } from 'vue-property-decorator';

編集： アルカリンは、ルートタイプを使用する代わりにルートタイプを使用することの非常に良い点を作りました

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';

上記の応答の方が優れていますが、完全を期すために、コンポーネントにいるときは、this。$ router.historyを使用してVueRouter内の履歴オブジェクトにアクセスできます。つまり、次のようにして変更を聞くことができます。

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

これは主にthis。$ router.currentRoute.pathと一緒に使用すると便利だと思います。 debugger

コードに命令を入力し、Chrome DevTools Consoleで遊んでください。

ディープオプションを備えたウォッチャーは私には機能しませんでした。

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

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

参考として、ドキュメントをご覧ください。

typescriptユーザーの別の解決策：

import Vue from "vue";
import Component from "vue-class-component";

@Component({
  beforeRouteLeave(to, from, next) {
    // incase if you want to access `this`
    // const self = this as any;
    next();
  }
})

export default class ComponentName extends Vue {}