検索で同じパスへの遷移をしたい

検索機能は作った

<div class="serach mr-10">
  <v-text-field 
    prepend-inner-icon="mdi-magnify" 
    @keydown.enter="redirectToSearchPage" 
    v-model="keyword">
  </v-text-field>
</div>

data() {
  return {
    keyword: '',
  };
},

redirectToSearchPage() {
  this.$router.push({ name: 'SearchPage', query: { q: this.keyword } });
},

一部省略

クエリパラメータはthis.$route.queryで受け取れるのでそれをもとにapiから検索結果を受け取って表示

検索結果ページから再度検索してもうまくいかない

enterを押しても表示されない

パラメータの変更を検知する

ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /user/foo から /user/bar へ遷移するときに同じコンポーネントインスタンスが再利用されるということです。 両方のルートが同じコンポーネントを描画するため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。

v3.router.vuejs.org

とのこと

変更を検知するにはwatchで$routeを監視すればいい
変更を検知したらlocation.reload()でリロードしている

watch: {
    $route() {
        location.reload();
    },
  },

またto, fromで遷移前と遷移後の情報を受け取れるので特定の状況でのみ遷移するときに

watch: {
    $route(from) {
      if (from.name === 'SearchPage') {
        location.reload();
      }
    },
  },

無事うまく動作するようになった