Vue 3.0：将给定对象传递给视图

Question

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

router.js:

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

}

Link:

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

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

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

我的Player.vue脚本：

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

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

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

对此有什么提示吗？

Answer 1

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

Vue 3.0: Pass given object to View