If I have two elements, the first one is named X:
<template>
<input required type='text' v-model.trim="number">
<input type="date" v-model="date" >
<button @click='allData(number,date)'>ok</button>
<table >
<thead>
<th>Details</th>
</thead>
<tbody>
<tr v-for='info in infos'>
<td @click="seeMore(info.id)" > {{ info.data.to }}
</td>
</tr>
</tbody>
</table>
</template>
<script lang="js">
import axios from 'axios';
export default {
name: 'X',
props: [],
data() {
return {
infos: [],
number: '',
date: new Date().toISOString().slice(0,10),
count:0
}
},
methods: {
allData: function(number,date) {
axios.get(`/api/infos?number=${number}&date=${date}`)
.then(response => {
this.infos = response.data.list;
this.count = response.data.count;
})
.catch(error => {
console.log(error);
});
},
seeMore (id) {
this.$router.push({ name: 'Y', params: { id }});
},
}
</script>
the 2nd element is called Y:
<template>
<div> {{details.data.add }}</div>
</template>
<script lang="js">
import axios from 'axios';
export default {
name: 'Y',
props: [],
mounted() {
const id = this.$router.currentRoute.params.id;
this.fetchInfoData(id);
},
data() {
return {
details: []
}
},
methods: {
fetchInfoData(id){
axios.get(`/api/search/${id}`)
.then(response => {
this.details = response.data
})
.catch(error => {
console.log(error);
});
},
},
}
</script>
I wish that when I navigate from component Y back to component X, the information of X related to the result in Y is still displayed without having to re-enter the date and number.