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>

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

Post.vue：

<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中，应如何设置像这样的“详细”组件？我可以以某种方式将对象作为道具传递给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()
   }
}

Vue.js：设置“详细组件”的正确方法

1 个答案: