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

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

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

In my BlogDetail.vue I have:

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

但我怎样才能得到blogs该组件中的数据，我在List成分？

因为现在在<template>我的部分BlogDetail.vue我无法访问例如{{ 博客名称 }}

Update:

我尝试通过blogs与道具：

现在我接受一个道具BlogDetails.vue:

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

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

Update 2:

这是我到目前为止所拥有的，链接到沙箱 https://codesandbox.io/s/jolly-gareth-mneqt

Here https://codesandbox.io/s/funny-jackson-qum01?file=/src/views/BlogDetails.vue是工作沙箱。

首先，您需要从 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 中发送 props，如下所示：

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