Vue Router - 使用主视图中的 json 填充详细信息视图

Question

在我的 Vue 应用程序中，我有一个主页视图，可以循环浏览来自 api 的帖子

http://jsonplaceholder.typicode.com/posts/

使用 Axios 是我的index.js 文件

import axios from 'axios'

export default {
  fetchPosts () {
    return axios
      .get('http://jsonplaceholder.typicode.com/posts/')
      .then(response => response.data)
  }
}

我的主页视图帖子设置，带有从 json 帖子 ID 生成详细信息视图的路由器链接

   <li v-for="post in posts" :key="post.title" class="post-item">
   <h1>{{ post.title }}</h1>
   <router-link :to="{ name: 'details', params: { id: post.id }}"> {{ post.title }}</router-link>
   </li>

我的主页脚本

<script>
export default {
  name: 'home',
  data () {
    return {
      loading: false
    }
  },

  computed: {
    posts () {
      return this.$store.state.posts
    }
  },

  created () {
    this.loading = true
    this.$store.dispatch('fetchPosts')
      .then(posts => {
        this.loading = false
      })
  }
}
</script>

Router 链接根据 json id 正确生成详细信息视图，因此 post 1 生成一个名为 /details/1 的页面，因为我当前的路由器已设置

  const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      props: true
    },
    {
      path: '/details/:id',
      name: 'details',
      component: () => import(/* webpackChunkName: "details" */ './views/Details.vue'),
      props: true
    }
  ]
})

export default router

在我的详细信息视图/views/Details.vue我有

<template>
<p> The post id is: {{ $route.params.id }} </p>
</template>

从我的主视图The detail is: 1正确检索json

我如何将帖子标题、正文等从主页视图放入详细信息视图？

如果我需要提供任何其他代码，请告诉我，谢谢。

Answer 1

我希望您使用axios 或一些ajax 来获取数据，如果是这样，请尝试这样做：

data() {
  return {
    myPost: {}
  }
}
mounted() {
  const base = 'http://jsonplaceholder.typicode.com';

  axios.get(`${base}/posts/${this.$route.params.id}`).then(resp => {
    console.log(resp.data);
    this.myPost = resp.data;
  });
}

如果您不想再进行一次axios 调用并使用已获取的数据，然后像params: { post: post } 那样在参数中传递完整的详细信息对象，请检查以下代码：

<router-link :to="{ name: 'details', params: { id: post.id, post: post }}"> {{ post.title }}</router-link>

然后这样获取数据$route.params.post.YOUR-KEY:

<template>
  <p> The post id is: {{ $route.params.post.id }} </p>
  <p> The post title is: {{ $route.params.post.title }} </p>
</template>

Answer 2

尝试像这样直接循环<router-link>

<router-link v-for="post in posts" :key="post.id" class="post-item" tag="li" :to="{name:'details',params:{id:post.id}}">
  {{ post.title }}
</router-link>