vue.js - 如何在 vuejs 中通过 <router-link/> 将 props 传递给命名 View ？

Question

我是 VueJS 和前端开发的新手。 我希望将一个 props(在本例中是我的俱乐部的 id)传递给我的组件/ View 。

它最初与<router-link :to="{ name: 'club', params: {id: club.id } }">合作。 我的组件调用 Prop “id”，而我的 View (名为 Club)具有参数 props:true;

快进一会儿，我必须添加命名 View 。 (我现在只添加了一个 - 但我将有一个 View 内容和一个导航)。

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 将我的 props 作为参数发送(参见附件 1)，但是一旦进入 View ，id 就未定义(参见附件 2)。

我错过了什么吗？

附件1

附件2

Answer 1

在这种情况下，您需要为每个命名 View 设置一个 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: