如何通过Vue.js中的<router-link />将props传递给命名视图？

Question

我是VueJS和前端开发的新手。 我希望将道具（在这种情况下，是俱乐部的ID）传递到组件/视图。

最初与<router-link :to="{ name: 'club', params: {id: club.id } }">合作。 我的组件将props称为“ id”，而我的视图名为club，其参数为props：true;

快进一会儿，我不得不添加命名视图。 （我现在仅添加了一个-但我将拥有一个视图内容和一个导航）。

mode: 'history',
  base: process.env.BASE_URL,
  linkExactActiveClass: 'is-active',
  routes: [
    {
      path: '/',
      name: 'clubs',
      components: {
        content: Clubs
      }
    },
    {
      path: '/club/:id',
      name: 'club',
      props: true,
      components: {
        content: Club
      }
    }
  ]
})

这破坏了一切。 在Vue扩展程序中，我可以看到我的send正在将我的道具作为参数发送（请参阅附件1），但是一旦在视图上，则id是未定义的（请参阅附件2）。

我想念什么吗？

附件1

附件2

Answer 1

在这种情况下，您需要为每个命名视图设置一个props值。例如

components: {
  content: Club
},
props: {
  content: true
}

我在文档中找不到对此的恰当解释，但在以下示例中确实有此特征：

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

请注意以下隐藏在代码示例中的注释：

// for routes with named views, you have to define the `props` option for each named view: