vue.js - Vue.js:设置 “detail component”的正确方法

Question

我有一个发布对象列表，现在我想为每个帖子设置一个详细页面/组件。在具有列表的组件中，执行以下操作:

Dashboard.vue:

<template>
    <div v-for="post in posts" v-bind:key="post.id">
        <router-link :to="{ name: 'post', params: { id: post.id }}">{{post.post_description}}</router-link>
    </div>
</template>

因此，我们有一个链接列表。当我单击链接时，将显示“发布”组件:

发布后:

<template>
    <div>
        Post
        {{ $route.params.id }} <!-- The post ID of whichever we clicked on -->
    </div>
</template>

我不确定如何将post对象(单击的对象)传递给post组件。我通过 $route.params.id获得了帖子的ID，因此我可以在服务器端设置一条路由，以通过ID来获取帖子，然后从发布组件向该路由发出GET请求，但这似乎是错误的，因为我已经拥有了从仪表板组件访问对象。

在使用vue-router的Vue.js中，应如何设置这样的“详细”组件？我可以以某种方式将对象作为 Prop 传递给 router-link并在Post.vue中访问该对象吗？

Answer 1

首先，您可以使用Vuex将所有帖子存储在全局存储中。

您可以获取帖子ID，并在“帖子”组件中找到特定的帖子，

例如，使用beforeRouteUpdate (to, from, next) {

{
   beforeRouteUpdate (to, from, next) {
     const { id } = to.params
     // set your post, for example
     this.$store.state.posts.find(post => post.id === id)
     next()
   }
}