Vue - 将参数作为道具传递给路由是未定义的 [英] Vue - passing params to route as props is undefined

问题描述

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

I am passing params to a named route from a component:

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

But the component does not render the props when referenced:

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

挂载方法中的日志返回undefined.

The log in the mounted method returns undefined.

但是，当我在 TeamInfo 组件中查看 Vue dev-tools 时，我可以看到两个 props 都未定义，但填充了 params.

However when I look in Vue dev-tools at the TeamInfo component I can see that both props are undefined but the params are populated.

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

I would like to be able to use the props in the component and also populate the URL with the team ID.

推荐答案

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

You have to use the boolean mode for to pass the params to both the URL and props. You also have to define the parameter inside the path to be able to access it. Here is an example that shows how to use it.

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

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

这篇关于Vue - 将参数作为道具传递给路由是未定义的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！