除非页面刷新了Nuxt / Vue JS，否则该方法不起作用

Question

我在 index.vue 中有一个链接，当我单击该链接时，该链接将被重定向到另一个名为 / recommendations / search

的页面。

<template>
  <div>
     <b-button class="btn-sm" @click="addRecommendation" variant="outline-primary">Add Recommendation</b-button>
  </div>
</template>

<script> 
  export default {
    addRecommendation() {
      this.$router.push(`/recommendations/search?uuid=${this.uuid}`)
    }
  }
</script>

在我的建议/搜索页面中，我有一种名为提交

的方法

<template>
  <div>
    <b-form @submit="search">
      <b-row>
        <b-col>
          <b-form-input v-model="searchTerm" size="lg" type="text" placeholder="Search POI..." autocomplete="off"></b-form-input>
        </b-col>
        <b-col>
          <b-button class="btn-lg" @click="search" variant="outline-primary">Search</b-button>
        </b-col>
      </b-row>
    </b-form>

  </div>
</template>

<script>
  import axios from 'axios';
  export default { 
   data() {
      return {
        searchTerm: '', 
      }
   },
   methods: {
      search(event) {
        event.preventDefault(); 
        // I'm calling an api here using axios
      }
   } 
</script>

点击提交时，我收到 400错误的请求，但是刷新页面后，我可以调用API。