Vue js router-link 数据绑定答案

【问题标题】：Vue js router-link Data bindVue js router-link 数据绑定
【发布时间】：2022-11-26 10:46:08
【问题描述】：

如果我需要总结我想做的事情，当post页面被记录时，数据从数据库中提取并列出。然后单击router-link 或通过 Url domain.com/post/1 输入时自动 2 axios是按需制作的。但我想做的是当你登录到post页面时，数据已经列出来了，我认为当你想从extra中提供一个详细条目时，不需要进行axios请求。在这种情况下，我想通过路由发送数据，但我不知道该怎么做。我可以绑定 @click 函数，但我想通过路由来完成它，而没有我想要完成的 click。当domain.com/post/1写在url上时，我希望它直接绑定。预先感谢您的回答。路由器

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>

【问题讨论】：

标签： vue.js axios vue-router

【解决方案1】：

抱歉打字答题区没有50声望。您可以尝试使用onMounted在页面加载/重新加载时获取您的 getDatabase 将直接调用该方法。更多详情请阅读Lifecycle Hooks

【讨论】：