Vue.js router-link 数据绑定

Question

If I need to summarize what I want to do, when the post page is logged, data is drawn from the database with axios and listed. and then when router-link is clicked or via Url domain.com/post/1 Automatically, when typed 2 axios are made on demand. But what I want to do is When you log in to the post page, the data is already listed and I think that there is no need to make an axios request when you want to provide a detail entry from the extra. In this case, I want to send data over the route, but I couldn't figure out how to do it. I can bind with the @click function, but I want to do it via the routing without the click that I want done. I want it to be bind directly when domain.com/post/1 is written on the url. Thank you in advance for your answer. Router

import Post from "./website/Post.vue";
import PostDetail from "./website/PostDetail.vue";
export default [
  {
    path: 'Post',
    component: Post,
    name: 'post',
    children: [
      {
        path: ':id',
        name: 'PostDetail',
        component: PostDetail,
        props: true
      }
    ]
  },
]

Post.Vue

<template>
 <div v-for="(list,index) in state.postList" :key="index">
  <router-link :to="{name: 'PostDetail', params: {id: list.id}}"/>
 </div>
 <div class="child">
  <router-view/>
 </div>
</template>

<script setup>
import axios from "axios";
import {reactive} from "vue";

const state = reactive({
 postList: [],
});
const fetchList = () => {
 axios.get("/post")
  .then((response) => {
   state.postList = response.data;
  });
};
fetchList()
</script>

PostDetail.vue

<template>
 <div>
  {{ getData }}
 </div>
</template>

<script setup>
import axios from "axios";
import {ref, defineProps} from "vue";

const props = defineProps({id: String})
const getData = ref([])

const getDatabase = () => {
 axios.get('/post' + '/' + props.id + '/detail')
  .then((response) => {
   getData.value = response.data;
  })
};
getDatabase()
</script>

Answer 1

Sorry for typing on Answer area haven't 50 reputation. You can try using onMounted to get your getDatabase when the page load/reload will direct calling the method. For more detail read Lifecycle Hooks