如何使 json 数据可用于我的 Vue 动态路由答案

【问题标题】：How make json data available for my Vue dynamic routes如何使 json 数据可用于我的 Vue 动态路由
【发布时间】：2020-06-20 05:57:35
【问题描述】：

我有一个List 组件，我从db/blogs.json 获取我的日期：

created() {
    fetch('http://localhost:3000/blogs')
    .then(response => {
      return response.json();
    })
    .then(data => {
      this.blogs = data;
    })
  },

在我的BlogDetail.vue 我有：

<script>
export default {
  data: () => {
    return {  
      blogId:this.$route.params.id
    }
  },
  computed: {
    blog() {
      return this.blogs.find(
        blog => blog.id === this.blogId
      )
    }
  }
}
</script>

但是我如何在这个组件中获取blogs 数据，我在List 组件中获取了这些数据？

因为现在在我的BlogDetail.vue 的<template> 部分，我无法访问例如{{ blog.name }}

更新：

我尝试使用道具传递blogs：

现在我正在接受BlogDetails.vue 中的道具：

props: {
    blogs: {
      type: Array
    }
  },

但是从哪里（哪个组件），我必须注册像:blogs="blogs"这样的道具？

更新 2：

这是我目前所拥有的，链接到the sandbox

【问题讨论】：

你可以使用props发送博客
@tuhin47 好的！但是我从哪里（从哪个组件注册）发送:blogs？
@tuhin47 我提供了沙箱的链接。
沙盒似乎在工作：/
@Lawrence Cherone 不，它不起作用。我想要的是从我的/db/blogs.json 获取例如blog.name' and blog.description` 可用于我的BlogDetail.vue 组件？我无法让它工作？

标签： vuejs2 vue-component vue-router

【解决方案1】：

Here 是工作沙箱。

首先，您需要从您的 JSON 文件中正确导入 JSON 数据。如：

<script>
import ListItem from "./ListItem";
import Blogs from "../../public/db/blogs.json";

export default {
  name: "List",
  components: {
    ListItem
  },
  data() {
    return {
      blogs: Blogs.experiences
    };
  },
  created() {}
};
</script>

必须在路由器链接中发送道具：

<router-link 
  :to="{ name: 'BlogDetails', params: { id: blog.id,blog:blog }}">More information
</router-link>

【讨论】：

我更新了我的答案编辑你的沙箱。请检查
非常感谢。所以你可以通过<router-link>传递道具，就这么简单？它从哪里得到 $route.params.id，explained here？它怎么知道哪个<router-link>属于哪个id？和视频里的设置不一样吧？
这里他们使用 vuex 进行状态管理。他们将所有数据保存到存储中，并在任何组件中使用这些数据。所以他们只需要id，通过这个id，他们可以随时获取原始内容

【解决方案2】：

您可以在标签名称中向子组件发送道具，在您的情况下：

  //LIST component(PARENT)
  <tamplate>
    <BlogDetail :blogs="blogs"></BlogDetail> //CHILD component
  </template>

【讨论】：

BlogDetail 是一个动态路由组件。我没有将标签名称放在任何地方..？