如果路由参数是带有路由链接的对象,则不传递路由参数

时间:2021-05-16 17:05:41

标签: vue.js vuejs3

我试图在 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 渲染正常:

enter image description here

如果我删除 realname 属性,它似乎被识别为 Object

enter image description here

我什至直接尝试使用 $route 并且得到与上面完全相同的结果

<template>
            <h1>Pilot Data for {{ this.$route.params.pilotdetails }}</h1>
            <h1>Pilot Data for {{ this.$route.params.cid }}</h1>
</template>

0 个答案:

没有答案