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

Question

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

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

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

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

How to pass Object through vue router as prop

javascript

vue.js

vue-router