Route Update 이전과 '$route' 감시와의 차이점 - Vue.js?

Route Update 이전과 '$route' 감시와의 차이점 - Vue.js?

아시다시피 사용하는 컴포넌트와 동일한 컴포넌트의 파라미터 변경에 대응하기 위해beforeRouteUpdate후크 또는 감시$route.

$route 감시:

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

beforeRouteUpdate 메서드:

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

이 둘의 차이점은 무엇입니까?둘 다 같은 경우 vue 라우터가 도입된 이유beforeRouteUpdate?

에 관한 매뉴얼에서beforeRouteUpdate:

이 컴포넌트를 렌더링하는 루트가 변경되었을 때 호출되지만 이 컴포넌트가 새 루트에서 재사용됩니다.예를 들어 다이내믹 파라미터가 있는 루트의 경우/foo/:id를 네비게이트 할 때/foo/1그리고./foo/2, 같은Foo컴포넌트 인스턴스가 재사용되고 이 후크가 호출됩니다.

문서에서는 훅이 값보다 먼저 호출되는 것은 분명 불명확합니다.$route오브젝트는 실제로 변경됩니다.그게 바로 이 네비게이션 훅과 감시자를 설정하는 것의 차이점입니다.$route값 뒤에 호출됩니다.$route변했다.

사용방법beforeRouteUpdate네비게이션 가드에서는 (콜을 하지 않음으로써) 루트의 변경을 막을지 여부를 결정할 수 있습니다.next()(다른 루트 값을 전달함으로써) 또는 완전히 다른 루트로 이동합니다.next('/foo'),next({ name: 'foo' })등).

이러한 함수가 호출되었을 때의 예를 다음에 나타냅니다.

@thanksd가 말했듯이$route간수 같아요.감시하는 것으로는 루트의 액션을 막을 수 없지만beforeRouteUpdate와 함께 할 수 있다next기능.예를 들어 데이터가 가져올 때까지 기다렸다가 구성 요소로 진행할 수 있습니다.

자세한 내용은 vue-router 설명서 데이터 가져오기에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/47184331/difference-between-beforerouteupdate-and-watching-route-vue-js