Vuejs : 경로 변경 이벤트

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: any) {
      // Some action
    }

그리고 예, 아래 @Coops에서 언급했듯이 포함하는 것을 잊지 마십시오

import { Prop, Watch } from "vue-property-decorator";

---

위의 응답이 더 좋지만 완성도를 위해 컴포넌트에있을 때 this. $ router.history를 사용하여 VueRouter 내부의 히스토리 오브젝트에 액세스 할 수 있습니다. 즉, 다음을 통해 변경 사항을들을 수 있습니다.

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

this. $ router.currentRoute.path와 함께 사용할 때 주로 유용하다고 생각합니다. debugger

코드에서 지시를 내리고 Chrome DevTools 콘솔을 시작하십시오.

---

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

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

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

참고로 설명서를 참조하십시오 .

참고URL : https://stackoverflow.com/questions/46402809/vuejs-event-on-route-change