javascript - How to pass Object through vue router as prop - Stack Overflow

admin管理员组

文章数量:1410730

So I've got a vue router and for one of the views, I want to pass a prop of type Object, but when I pass the prop, it ends up not as an object but as [object Object].

Heres how I set up the route for this page:

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

Here's the view I'm trying to go to:

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

And the first tag of my router link going there:

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

For now, I'm using dummy data for the blog page and the dummy blog object looks like this:

{
    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"
}

Right now, the BlogPage view looks like this and the h1 has no text:

So I've got a vue router and for one of the views, I want to pass a prop of type Object, but when I pass the prop, it ends up not as an object but as [object Object].

Heres how I set up the route for this page:

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

Here's the view I'm trying to go to:

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

And the first tag of my router link going there:

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

For now, I'm using dummy data for the blog page and the dummy blog object looks like this:

{
    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"
}

Right now, the BlogPage view looks like this and the h1 has no text:

• javascript
• vue.js
• vue-router

Share Follow edited Jul 31, 2021 at 0:19 ryandu asked Jul 30, 2021 at 18:11 ryanduryandu 64799 silver badges1717 bronze badges 2

• So the object is in the route parameters? – H. Kamran Commented Jul 30, 2021 at 23:04
• Yes i think so. – ryandu Commented Jul 30, 2021 at 23:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Assuming the object is in the route parameters and you're not using the position API, in your view's <script> tag, you can add the blog object to the data object.

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

But, because you're passing in the object via the route parameters, which only accepts strings, the object is converted to its string representation: [object Object]. To work around this, first, you need to change the parameter to be a string version of the object. This can be acplished with JSON.stringify. So your <router-link> turns into <router-link :to="{ name: 'BlogPage', params: { blog: JSON.stringify(blog) }}">. Then, you have to update the data object in the view by parsing the passed in object with JSON.parse. To do this, replace this.$route.params.blog with JSON.parse(this.$route.params.blog).

本文标签： javascriptHow to pass Object through vue router as propStack Overflow