Vue 라우터 - 쿼리 매개 변수 처리

Question

<search-bar> 필터 검색으로 사용할 드롭 다운 목록이있는 구성 요소가 있습니다. 이것은 나의 URL을 CHAGE합니다

search() { 
    let query = { 
     status: this.selectedOrderStatus 
    }; 

    this.$router.push({ path: '/', query: query }) 
} 

: 나는 submit 버튼을 누를 때 나는 다음과 같은 코드를 실행 http://localhost:8080?status=1 또는 http://localhost:8080?status=2하고 확인을 클릭합니다. 또 다른 구성 요소에서

(즉, / 구성 요소입니다) 나는이 같은 URL 변경을 처리 할 수있는 시계 곳이 :

watch: { 
'$route': 'loadOrders' 
}, 

그래서, 내 드롭 다운 나는 선택의 값은 구성 요소가 다시로드됩니다.

하지만 제가 http://localhost:8080?status=1 일 경우 버튼을 누르십시오. 제출 버튼 아무 일도 일어나지 않습니다. 재로드를하기 위해 다른 값 (예 : 2)을 선택해야합니다.

제출 버튼을 누를 때마다 재로드를 어떻게 처리 할 수 ​​있습니까? 왜냐하면, 같은 매개 변수를 사용하여 "Submit"을 다시 누르기를 원합니다.

Answer 1

제출시 쿼리 매개 변수를 변경하지 않기 때문에 Vue는 변경 사항을 감지하지 않고 각각 구성 요소를 다시로드하지 않습니다. 귀하의 경우에는 제출 양식이있는 곳에서 직접 loadOrders으로 전화하는 것이 좋습니다.

제출을 클릭하고 경로에 의존하지 않을 때 이벤트를 내 보냅니다. https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication