如何通过 vue router 将对象作为 prop 传递

Question

所以我有一个 vue 路由器，对于其中一个视图，我想传递一个 Object 类型的 prop，但是当我传递该 prop 时，它最终不是作为一个对象，而是作为[object Object].

这是我设置此页面的路线的方法：

{
    path: '/blogpage/',
    name: 'BlogPage',
    component: () => import('../subviews/BlogPage.vue'),
    props: (route) => ({
        blog: route.params.blog,
        ...route.params
    })
  }

这是我想要去的视图：

<template>
    <div class="page" v-on:click="test">
        AJSFHDKOIFHNK
        {{blog}}
        <h1>{{ blog.title }}</h1>
    </div>
</template>

<script>
export default {
    name: 'BlogPage',
    props: {
        blog: Object,
    },
}
</script>

我的路由器链接的第一个标签到那里：

{
    path: '/blogpage/',
    name: 'BlogPage',
    component: () => import('../subviews/BlogPage.vue'),
    props: (route) => ({
        blog: route.params.blog,
        ...route.params
    })
  }

目前，我对博客页面使用虚拟数据，虚拟博客对象如下所示：

{
    title: 'Blog Post 1',
    content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis temporibus exercitationem aut unde provident mollitia?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex optio, quas doloribus impedit aut cum expedita molestiae beatae incidunt similique, aliquam ea nemo exercitationem libero atque sunt autem. Inventore, nostrum veritatis. Nostrum eum aliquid soluta praesentium ullam distinctio temporibus eius doloremque dicta doloribus, et labore vitae odio impedit maiores ratione!',
    date: '2018-01-01',
    author: 'John Doe',
    id: "90876tygui"
}

现在，BlogPage 视图如下所示，并且 h1 没有文本：

Answer 1

假设该对象位于路由参数中并且您没有使用组合 API，则在视图的<script>标记中，您可以将该blog对象添加到该data对象中。

export default {
    name: 'BlogPage',
    data: function() {
        return {
            blog: this.$route.params.blog,
        };
    },
}

但是，由于您通过路由参数传入对象，该参数仅接受字符串，因此该对象将转换为其字符串表示形式：[object Object]。要解决此问题，首先需要将参数更改为对象的字符串版本。这可以通过 来完成JSON.stringify。所以你<router-link>变成了<router-link :to="{ name: 'BlogPage', params: { blog: JSON.stringify(blog) }}">。然后，您必须通过使用 解析传入的对象来更新视图中的数据对象JSON.parse。为此，请替换this.$route.params.blog为JSON.parse(this.$route.params.blog).