beforeRouteUpdate와 '$ route'시청 차이 - Vue.js?

Question

아시다시피, 동일한 구성 요소의 params 변경 사항에 대응하려면 beforeRouteUpdate 후크를 사용하거나 $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을 도입 했습니까? 에서

Answer 1

documentationbeforeRouteUpdate에이 컴퍼넌트를 렌더링하는 경로가 변경 될 때 호출

하지만,이 구성 요소가 새로운 경로에 재사용된다. 예를 들어 동적 매개 변수가 /foo/:id 인 경로의 경우 /foo/1과 /foo/2 사이를 탐색하면 동일한 Foo 구성 요소 인스턴스가 다시 사용되고이 상황이 발생할 때이 훅이 호출됩니다.

문서는 후크가 전에 $route 객체가 실제로 변경의 값을 을 호출되는 것을 인정 하듯이 불분명하다. 그것이이 내비게이션 훅과 워커를 $route에 설정하는 것의 차이입니다.이 경우 값이 $route 이후에 으로 변경됩니다.

, 당신은 당신이 (next()를 호출하지 않음으로써) 변경하는 경로를 방지 할 것인지 여부를 결정할 수 있습니다 또는 next('/foo'), next({ name: 'foo' }) 등과 같은 다른 경로 값을 전달하여 (완전히 다른 경로로 이동 beforeRouteUpdate 탐색 가드를 사용하여).

다음은 이러한 함수가 호출 될 때 표시되는 fiddle의 예입니다.

Answer 2

@thanksd가 말한대로 beforeRouteUpdate은 가드와 비슷합니다. 당신이 조치를 취하는 것을 막을 수는 없지만, beforeRouteUpdate으로하면 next 기능으로 할 수 있습니다. 예를 들어 데이터를 가져올 때까지 기다린 다음 구성 요소로 진행할 수 있습니다.

자세한 내용은 vue-router 설명서 Data Fetching에서 확인할 수 있습니다.