Vue 라우터와 VueJ의 반응성

Vue 라우터와 VueJ의 반응성

이 코드가 있어요vue-router:

{ 
   path: '/templates/:id/items/:itemId', component: Item,
   name: 'item'
},

항목 개체에 계산된 속성이 있습니다.templateId:

templateId() {
   return parseInt(this.$route.params.id, 10);
},

문제는 url에 앵커를 추가할 때마다(링크를 클릭하여 내부)item컴포넌트가 변경되지 않더라도 이 속성은 다시 계산됩니다.

즉, 모든 계산된 속성이templateId다시 계산됩니다.

그러나 templateId 값은 변경되지 않습니다.

다음은 이 문제를 설명하는 매우 간단한 jsfiddle입니다.

https://jsfiddle.net/1Lgfn9qh/1/

워치 속성(호출되지 않음)을 삭제하면 콘솔에 아무것도 기록되지 않습니다.

여기서 무슨 일이 일어나고 있는지 설명해 주시겠어요?값이 갱신되지 않은 경우에도 계산된 속성이 재계산되는 이유는 무엇입니까?어떻게 하면 피할 수 있을까요?

이런 행동을 일으키는 건 사실이에요route객체는 Vue에서 불변합니다.네비게이션에 성공하면 완전히 새로운 루트 객체가 생성되므로 계산 및 감시된 모든 속성의 재연산이 트리거됩니다.자세한 내용은 https://router.vuejs.org/api/ #the-route-object를 참조하십시오.

이 문제를 해결하려면watch루트 오브젝트와 관련된 변경과 무관한 변경을 필터링합니다.

watch: {
  '$route' (to, from) {
    if(to.path != from.path) { // <- you may need to change this according to your needs!
      this.relevantRoute = to
    }
  }
}

그런 다음 계산 및/또는 감시 속성에서 수동으로 설정된 변수를 참조합니다.

templateId() {
  return parseInt(this.relevantRoute.params.id, 10);
},

언급URL : https://stackoverflow.com/questions/56414506/vue-router-and-vuejs-reactivity