我试图在 router-link
标签中传递 2 个参数。
具有路由器链接的组件:
<template>
<router-link class="pilot-link" :to="{ name: 'PilotCard', params: {cid: pilot.cid , pilotdetails: pilot } }">
<div class="pilot-card">
<span>{{ pilot.realname }} with callsign {{ pilot.callsign }} </span>
<h4>Server: {{ pilot.server }}</h4>
</div>
</router-link>
</template>
<script>
export default {
name: "VatsimPilot",
props: {
pilot: {
type: Object,
required: true
}
}
}
</script>
我想传递对象的 cid
属性以及整个对象。我将属性 cid
用于路由路径,并且我想在目标组件中使用完整对象。
路线如下:
{
path: "/pilot/:cid",
name: "PilotCard",
props: true,
component: PilotCard
},
props 设置为 true 以便将 params 作为 props 传递给组件。
目标组件:
<template>
<h1>Pilot Data for {{ pilotdetails }}</h1>
<h1>Pilot Data for {{ cid }}</h1>
</template>
<script>
export default {
props: ['pilotdetails','cid']
}
</script>
以上对 realname
没有任何渲染,但对 cid
渲染正常:
如果我删除 realname
属性,它似乎被识别为 Object
:
我什至直接尝试使用 $route
并且得到与上面完全相同的结果
<template>
<h1>Pilot Data for {{ this.$route.params.pilotdetails }}</h1>
<h1>Pilot Data for {{ this.$route.params.cid }}</h1>
</template>