Vue-Router 頁面通過表單提交重新加載

Question

我正在嘗試制作一個簡單的電影搜索器來熟悉 Vue 但這件事是一個痛苦的 ***。

我遇到的問題是我的大多數路線都使用相同的組件，因為它們都做相同的工作，但信息不同。 所以我認為使用路徑參數來告訴它需要獲取什么樣的信息是一個好主意，所有其他路由都可以正常工作，但是當我嘗試提交帶有我需要 API 搜索的查詢的表單時，頁面不會重新加載，因此組件的信息與上一條路線中的信息相同。

我已經嘗試過 router.go() 並且它不起作用。 還嘗試了 beforeRouteUpdate 及其所有無用的表親，但它們都不起作用。

這是我的代碼：

路由器.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import Detail from "./views/Detail.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/favorites",
      name: "favorites",
      component: Home
    },
    {
      path: "/results/:search",
      name: "results",
      component: Home
    },
    {
      path: "/detail/:id",
      name: "detail",
      component: Detail
    }
  ]
});

Cards.vue 這個東西是 Home 調用的

<template>
  <div class="cardContainer">
    <Filters />
    <div
      v-if="$store.state.movieList.length > 0"
      class="cardContainer-container"
    >
      <Card
        v-for="(item, index) in $store.state.movieList"
        :key="index"
        :id="item._id"
        :title="item.title"
        :img="item.image"
        :year="item.year"
        :description="item.description"
      />
    </div>
    <div v-else class="cardContainer-container">
      Not fun
    </div>
  </div>
</template>

<script>
import Card from "./Card.vue";
import Filters from "./Filters.vue";

export default {
  name: "cardContainer",
  components: {
    Card,
    Filters,
  },
  data() {
    return {
      path: this.$route.name,
      params: this.$route.params.search,
    };
  },
  beforeMount(){
    console.log("path", this.path);//this work when I change with the navBars Links, but not when using the search button

  },
  beforeRouteUpdate(to, from, next){
    console.log("I hope this works", to); //This thing does not work.
    next();
  }
};
</script>

搜索欄.vue

<template>
  <form class="searchBar" v-on:submit="onSubmit">
    <input type="text" v-model="search" />
    <button type="submit">
      Search
    </button>
  </form>
</template>

<script>
export default {
  name: "searchBar",
  data() {
    return {
      search: ""
    };
  },
  methods: {
    onSubmit() {
       // this.$router.go(`/results/${this.search}`) //does not work
      this.$router.push(`/results/${this.search}`);
      this.search = "";
    }
  }
};
</script>

更新：

我通過在卡片組件中添加一個奇怪的手表並在提交搜索表單時使用 @submit.prevent="submit" 來解決它。

卡片.vue

<script>
import Card from "./Card.vue";
import Filters from "./Filters.vue";

export default {
  name: "cardContainer",
  components: {
    Card,
    Filters,
  },
  data() {
    return {
      path: this.$route.name,
      params: this.$route.params.search,
    };
  },
  beforeMount() {
    console.log("path", this.path); //dispatch
  },
  created() {
    this.$watch(
      () => this.$route.params.search,
      () => {
         this.params = this.$route.params.search;
        //dispatch 
      }
    );
  },
};
</script>

我仍然想要一種更清潔的方式。 如果有人找到它，請告訴我。 謝謝你。

Answer 1

當您提交表單時，本機行為正在刷新頁面，所以我認為您應該這樣做：

v-on:submit.prevent="onSubmit"

或者

@submit.prevent="onSubmit"

Answer 2

我沒有仔細閱讀您的問題，但您可能需要根據 URL（包括 URL 參數）制作路由器視圖密鑰，以便在 URL 更改時不緩存（默認情況下它不包括 url 參數）

<router-view :key="$route.fullPath"></router-view>

即使在表單提交時，您也不應該刷新應用程序。 您還應該使用其他答案中列出的.prevent方法。

如果您需要跨多個頁面共享數據，您可以使用存儲而不是查詢參數，或者您可以只使用組合 api 構建一個非常簡單的存儲，而不需要 vuex 的復雜性。