Vue 组件不会在新的 $router.push 上重新渲染

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
  })
}

目前：

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