Vuejs: 경로 변경 시 이벤트

Vuejs: 경로 변경 시 이벤트

내 메인 페이지에는 내가 보여주는 드롭다운이 있다.v-show=show링크를 클릭하여@click = "show=!show"그리고 나는 설정하기를 원한다.show=false내가 경로를 바꿀 때 말이야.이 일을 어떻게 깨달아야 할지 조언해 줘.

에 감시자 설정$route다음과 같은 구성 요소:

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

시 로 한다.show거짓으로

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

동일한 구성 요소의 매개 변수 변경에 대응하려면 $route 개체를 보십시오.

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

또는 2.2에 소개된 RouteUpdate 가드를 사용하십시오.

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

Typecript에서 이 방법을 찾고 있는 사람이 있을 경우 다음 해결 방법을 참조하십시오.

@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';

선택의 폭이 넓은 감시자는 내게는 통하지 않았다.

대신, 나는 구성요소의 데이터가 변경될 때마다 실행되는 업데이트된() 라이프사이클 후크를 사용한다.장착()할 때처럼 사용하십시오.

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

자세한 내용은 설명서를 참조하십시오.

갱신하다

@CHANISt에서 말한 바와 같이,router.listen더 이상 작동하지 않고, 어느 버전에서 작동이 중단되었는지 모르지만, 좋은 소식은 (@CHANist에서 언급된 바와 같이) 우리가 다음을 사용할 수 있다는 것이다.

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

이전 응답

위의 답변이 더 좋지만, 단지 완전성을 위해서, 당신이 구성 요소에 있을 때, 당신은 이것을 가지고 VueRouter 내부의 히스토리 객체에 접근할 수 있다.1달러짜리역사의즉, 다음과 같이 변경사항을 청취할 수 있다.

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

나는 이것이 이것과 함께 사용될 때 주로 유용하다고 생각한다.$router.currentRoute.path 내가 말하는 위치 확인 가능debugger

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

"vue-router"에서 { useRouter } 가져오기;

const 라우터 = useRouter();

router.after각각((to, from) => { };

형식 지정 사용자를 위한 다른 솔루션:

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

Vue 라우터를 사용하는 다른 방법으로는 다음과 같은 구성 요소에서 메서드 후 preforeRouteLeave를 사용하십시오.

<template>
   <button @click="ShowMethod">DisplayButton</button>
</template>
<script>
  data() {
    return { show: true };
   },
   methods: {
   ShowMethod() {
   this.show = false;
    }
   },
   beforeRouteLeave(to, from, next) {
   this.show = false;
   next();
 }
</script>

VueJs 설명서에 따르면, 아래의 링크를 Navigation Guards라고 한다.

네비게이션 가드

휴가 가드는 보통 사용자가 저장하지 않은 편집으로 실수로 경로를 이탈하지 않도록 하기 위해 사용된다.전화를 걸면 내비게이션이 취소될 수 있음

In-Component Guards:

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

  beforeRouteLeave(to, from, next) {
// called when the route that renders this component is about to
// be navigated away from.
// has access to `this` component instance.
 }

look at the below link for more information:

In-Component Guards

ReferenceURL : https://stackoverflow.com/questions/46402809/vuejs-event-on-route-change