새로운 $ router.push에서 Vue 구성 요소가 다시 렌더링되지 않음

Question

이 SearchResult 구성 요소는 vue-router에 의해 호출 될 때 YouTube API v3에서 객체를 가져옵니다. 수신 된 객체는 수십 개의 하위 구성 요소에 대한 소품으로 전달됩니다. 나는 경로를 바꾸고이 분대를 표시하기 위하여 $router.push(/search/ + this.query)를 사용하는 수색 막대가있다.

문제는 처음으로 또는 다른 경로에서 검색을 사용할 때 매우 좋습니다. 하지만 다시 검색 할 때 은에서 API의 새로운 결과로 다시 렌더링하지 않습니다. 비록 내가 시계를 추가했습니다 this.$route.params.query. 다음은 SearchResult.vue 구성 요소입니다.

<template> 
<div> 
    <app-banner></app-banner> 
    <div v-if="resultIds"> 
    <div v-for="resId in resultIds.items"> 
     <vid-preview :vidId="resId.id.videoId"></vid-preview> 
    </div> 
    </div> 
</div> 
</template> 

<script> 
import axios from 'axios' 

export default { 
    data() { 
    return { 
     resultIds: null, 
     errors: [] 
    } 
    }, 
    watch: { 
    '$route.params.query' (newQuery, oldQuery) { 
     this.$router.push('/search/' + newQuery) //This code executes but no change visible on screen. 
    } 
    }, 
    created() { 
    axios.get(`https://www.googleapis.com/youtube/v3/search/`, { 
     params: { 
     part: 'id', 
     q: this.$route.params.query, 
     order: 'relevance', 
     maxResults: '50', 
     key: '{API KEY}' 
     } 
    }).then(res => { 
     this.resultIds = res.data; 
    }).catch(e => { 
     this.errors.push(e); 
    }) 
    } 
} 
</script> 

Answer 1

그것은 다음과 같이해야한다 :

현재

'$route.params.query' (newQuery, oldQuery) { 
    this.$router.push({ 
    path: '/search/' + newQuery 
    }) 
} 

: 편집 주셔서 감사합니다 @samayo

'$route.params.query' (newQuery, oldQuery) { 
    this.$router.push('/search/' + newQuery) //This code executes but no change visible on screen. 
}