如何通过 Vue Router 直接在 prop 中传递对象？

Question

在 Vue JS3 中，我的 Vue 组件，我可以像这样传递道具：Parent：

<script>
export default {
data() {
    return {
    links: [],
    };
},
methods: {
    editLink(el) {
    this.$router.push({
        name: "EditLink",
        params: {
        id: el.id,
        short_link: el.short_link,
        long_link: el.long_link,
        },
    });
    },
},
};
</script>

组件：

<script>
export default {
props: ["elem"],
data() {
    return {
    link: {},
    };
},
mounted() {
    this.link = {
    id: this.$route.params.id,
    short_link: this.$route.params.short_link,
    long_link: this.$route.params.long_link,
    };
},
};
</script>

但是如果我像这样直接传递名为 el 的对象：

this.$router.push({
    name: "EditLink",
    params: {
        elem: el,
    },
});

当我尝试将其打印出来时，我将 elem 的值作为 [Object Object]，而不是实际对象。为什么会这样？有什么解决办法？

Answer 1

尝试传播 el 而不是将每个值分配给相应的键：

    this.$router.push({
        name: "EditLink",
        params: {...el},
    });

然后在目标页面中：

mounted() {
    this.link = {...this.$route.params};
},

如何通过 Vue Router 直接在 prop 中传递对象？

How to pass an object directly in a prop through Vue Router?

vue.js

vue-router

vuejs3