如何通过 vue 路由器将对象作为道具传递

Question

所以我有一个 vue 路由器，对于其中一个视图，我想传递一个 Object 类型的道具，但是当我传递道具时，它最终不是作为对象，而是作为 [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>

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

<router-link :to="{ name: 'BlogPage', 
           params: { blog: blog }}">

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

{
    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)。