Vue 3.0：将给定的对象传递给 View

Question

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

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 的路由器链接的文件）中执行此操作时，我可以在控制台中看到视频对象：

对此有何提示？

Answer 1

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