Vue - 将参数传递给路线作为道具未定义

Question

我正在将参数从组件传递到命名路由：

      <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
  }
}

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

<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>

挂载方法中的log returns undefined.

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

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

Answer 1

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

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

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

Vue - 将参数传递给路线作为道具未定义

Vue - passing params to route as props is undefined

vue.js

vue-router

vue-component

vuejs2