使用Vue.js提交表单后如何重定向多次

Question

我正在尝试显示电影查询的结果。

当我提交表单时，我被正确地重定向到带有结果的页面。 问题是，如果我输入一个新电影的标题并再次提交，我就不再重定向了（所以不要看新的结果）。 我必须刷新浏览器才能看到结果。

我的家乡。

<template>
  <form class="form-inline my-2 my-lg-0" v-on:submit.prevent="submit()">
    <input
      class="form-control mr-sm-2"
      type="search"
      v-model="query"
      autofocus
      placeholder="Enter a movie title"
      aria-label="Search"
     />
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
              Search
            </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      query: ""
    };
  },
  methods: {
    submit() {
      console.log('clicked')
      this.$router.push({ name: "search-movies", query: { q: this.query } });
    }
  }
};
</script>

我的搜索vue（结果页面）

<template>
  <div>
    <h1>Search</h1>
    <div class="row">
      <MovieListItem v-for="movie in movies" :key="movie.id" :movie="movie" />
    </div>
  </div>
</template>

<script>
import MOTService from "@/services/MOTService.js";
import MovieListItem from "@/components/MovieListItem.vue";

export default {
  components: {
    MovieListItem
  },
  data() {
    return {
      movies: [],
      meta: {},
    };
  },
  methods: {
    searchMovies() {
      MOTService.searchMovies(this.$route.query)
        .then(response => {
          this.movies = response.data["data"];
          this.meta = response.data["meta"];
        })
        .catch(error => {
          console.log("There was an error:", error.response);
        });
    }
  },
  created() {
    this.searchMovies();
  }
};
</script>

我的router.js

...
{
  path: "/search",
  name: "search-movies",
  component: Search,
}

Answer 1

正如克里斯所说，如果我已经在路线search-movies ，我没有做新的请求，所以我无法更新结果。 我更容易解决的问题是添加this.$router.go(0); 在submit()函数上。

...
methods: {
    submit() {
      this.$router.replace({ name: "search-movies", query: { q: this.query } });
      this.$router.go(0);
    }
  }

Answer 2

您可以尝试在$route.query上添加一个观察程序，并在查询更改时随时重新搜索：

methods: {
  searchMovies(query) {
    MOTService.searchMovies(query)
      //...
    });
  }
},
created() {
  this.searchMovies(this.$route.query);
},
watch: {
  '$route.query'(value) {
    this.searchMovies(value)
  }
}