Question

如果我有两个部分，第一个被称为A：

<template>
<input  required type='text' v-model.trim="number">
<input type="date" v-model="date" >
<button @click='allRecords(number,date)'>ok</button>
 <table >
    <thead>
      <th>Coordonnées</th>
    </thead>
    <tbody>
      <tr v-for='contact in contacts'>
        <td @click="seeDetails(contact.id)" > {{ contact.data.to }} 
</td> 
      </tr>
    </tbody>
  </table>
</template>

<script lang="js">
import axios from 'axios';
import Vue from 'vue';
export default {
name: 'A',
props: [],
data() {
  return {
contacts: [],
number: '',
date: new Date().toISOString().slice(0,10),
nombre:0
 }

},
methods: {
 allRecords: function(number,date) {
   axios.get(`/api/contacts?number=${number}&date=${date}`)
     .then(response => {
       this.contacts = response.data.list;
       this.nombre = response.data.count;
     })
     .catch(error => {
       console.log(error);
     });
 },
 seeDetails (id) {
     this.$router.push({ name: 'B', params: { id }});
   }, 
}
</script>

第二个叫B：

  <template>
  <div> {{details.data.add }}</div>
  </template>
  <script lang="js">
    import axios from 'axios';
    export default  {
     name: 'B',
     props: [],
      mounted() {
       const id = this.$router.currentRoute.params.id;
    this.fetchContactData(id);
   },
   data() {
    return {
     details: []
    }
  },
  methods: {
   fetchContactData(id){
    axios.get(`/api/recherche/${id}`)
    .then(response => {
        this.details = response.data
    })
    .catch(error => {
        console.log(error);
      });
     },
    },
   } 
  </script>

我想在离开组件B时让组件A具有A的信息，该信息与我在B中的结果密切相关，而无需再次输入日期和数字。 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Answer 1

您已经陷入应用程序状态的问题，并且视图可能会有所不同。推荐的解决方案是vuex。对于简单的情况，我希望将应用程序状态保留在全局javascript变量中。您的vue组件不需要传递状态，但是它们引用的是vue外部的单个事实来源，它们都可以显示和修改。因此，您的应用程序状态是一个联系人数组，而需要更好命名的B组件只会将行压入该数组。返回A时，页面将反映新数据。

Answer 2

我看到您想根据特定联系人的ID显示其详细信息。

但是您的路由器配置正确吗？

动态路线匹配：

routes: [
    { path: '/contacts/:contact', component: B }
]

在https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes上查看更多信息

在Vue JS中从一个组件转到另一个组件时如何保留组件的信息

2 个答案: