Vue 3.0：将给定对象传递给 View答案

【问题标题】：Vue 3.0: Pass given object to ViewVue 3.0：将给定对象传递给 View
【发布时间】：2021-02-21 14:37:43
【问题描述】：

您好，我正在努力通过路由器将对象发送到视图，这是我的设置：

router.js：

...{
path: '/player/:id',
name: 'Player',
component: Player,
props: true

}

链接：

<router-link :to="{name:'Player', params:{id:video.snippet.resourceId.videoId}, query:{video:video}}" class="uk-position-cover"></router-link>

可以发送视频链接并且可以访问，但我也需要额外的视频数据。

我在 Player.vue 中得到的只是 [[Object Object]] - 那么我怎样才能传递整个对象而不仅仅是字符串呢？

我的 Player.vue 脚本：

export default {props: ['id','video'],components : {  },data(){console.log(this.$route)return{}}}

我已经尝试通过参数、道具、查询来传递视频对象...

编辑：当我在 VideoLink.vue（包含指向 Player.vue 的路由器链接的文件）中执行此操作时，我可以在控制台中看到视频对象：

关于这个的任何提示？

【问题讨论】：

【解决方案1】：

您应该将对象序列化为 JSON（并在您的视图中反序列化）- URL 是字符串，因此不能包含对象，因此必须将对象序列化为字符串。 router-link 不会自动为您序列化 - 它只是调用对象的 toString() 方法，该方法仅返回 [object Object]。

【讨论】：