Vue - 将参数作为道具传递给路由是未定义的答案

【问题标题】：Vue - passing params to route as props is undefinedVue - 将参数作为道具传递给路由是未定义的
【发布时间】：2019-07-31 08:09:00
【问题描述】：

我正在将参数传递给组件中的命名路由：

      <v-list-tile
        :key="team.logo_url"
        :to="{name: 'team', params: {
          id: team.id,
          name: team.name
        }}"
        avatar
      >

路线是这样设置的：

{
  path: "/team",
  name: "team",
  component: TeamInfo,
  props: {
    id: true,
    name: true
  }
}

但是组件在引用时不渲染props：

<template>
  <v-container>
      <p>{{ id }}</p>
  </v-container>
</template>

<script>

  import TeamService from '@/services/TeamService';

  export default {
    props: ['id', 'name'],
    data: () => ({
        players: [],
        games: []
    }),
    mounted() {
        console.log(this.id);
    }
  }
</script>

mounted方法中的日志返回undefined。

但是，当我在 Vue 开发工具中查看 TeamInfo 组件时，我可以看到两个道具都未定义，但参数已填充。

我希望能够使用组件中的道具并使用团队 ID 填充 URL。

【问题讨论】：

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

您必须使用boolean 模式将参数传递给 URL 和 props。您还必须在 path 中定义参数才能访问它。这是an example，它展示了如何使用它。

{
  name: "team",
  path: "/team/:id",
  component: TeamInfo,
  props: true,
}

https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

【讨论】：

试过这个并没有解决问题。尝试记录道具时我仍然不确定。我现在不太关心 URL，因为更担心的是我无法将参数作为道具获取到 TeamInfo 组件中。
您还必须在 path 内定义参数 /team/:id 否则不考虑该属性。我已经用一个例子更新了答案。
是的，我这样做了。路径现在很好。
但是无法将 props 从路由中获取到组件中。
您是否检查了我在答案中链接的示例？