Vuejs : 경로 변경 이벤트

메인 페이지에는 v-show=show링크를 클릭하여 표시 되는 드롭 다운이 있으며 경로를 변경할 때 @click = "show=!show"설정하고 싶습니다 show=false. 이걸 어떻게 깨달을 수 있는지 알려주세요.

다음과 같이 컴포넌트에서 감시자 를 설정 $route하십시오.

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

이것은 경로 변경을 관찰하고 변경되면 showfalse로 설정 됩니다.

v2.2.0을 사용하는 경우 $ routes의 변경 사항을 감지하는 데 사용할 수있는 옵션이 하나 더 있습니다.

동일한 구성 요소의 매개 변수 변경 사항에 대응하기 위해 $ 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';

편집 : Alcalyn은 경로 유형을 사용하는 대신 경로 유형을 사용하는 것이 좋았습니다.

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

위의 응답이 더 좋지만 완전성을 위해 구성 요소에있을 때 this. $ router.history를 사용하여 VueRouter 내부의 기록 개체에 액세스 할 수 있습니다. 즉, 다음을 통해 변경 사항을들을 수 있습니다.

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

나는 이것이 이것과 함께 사용될 때 주로 유용하다고 생각합니다. $ router.currentRoute.path debugger

코드에서 지침을 따르고 Chrome DevTools 콘솔로 게임을 시작하십시오.

깊은 옵션을 가진 감시자는 나를 위해 작동하지 않았습니다.

대신 구성 요소의 데이터가 변경 될 때마다 실행되는 updated () 수명주기 후크를 사용 합니다. mount () 와 같이 사용하십시오 .

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

참조를 위해 설명서를 방문하십시오 .

타이프 스크립트 사용자를위한 또 다른 솔루션 :

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 {}