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

Posted 2023-02-22

【中文标题】Vue Router - 使用主视图中的 json 填充详细信息视图

【英文标题】：Vue Router - Populate details view with json from home view

【发布时间】：2020-07-15 03:48:40

【问题描述】：

在我的 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

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

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

【参考方案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>

【讨论】：

我在 index.js export default fetchPosts () return axios .get('http://jsonplaceholder.typicode.com/posts/') .then(response => response.data) 中使用 axios，这会在同一个 index.js 中还是在我的详细信息视图中？

@Mills 我已经更新了答案，请检查一下。

我在家里更新了我的路由器链接到你更新的答案，连同详细信息模板，我收到了一个"TypeError: Cannot read property 'id' of undefined" 我还更新了我的问题以包括我的家庭脚本，谢谢你的帮助。

vue-router] missing param for named route "details": Expected "id" to be defined

试试：params: id: post.id, post: post ，如果这不起作用，请在 Skype 上 ping 我syed_haroon，让我打 Skype 电话。

【参考方案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>